You can use the option revalidateOnMount
and set it to false
. This will ensure that useSWR only sends a request on the initial mount of the component and will not revalidate the data again.
Here's an example:
import useSWR from 'swr';
function MyComponent() {
const { data, error } = useSWR('/api/some-data', fetcher, { revalidateOnMount: false });
if (error) return <div>Error</div>;
if (!data) return <div>Loading...</div>;
return <div>{data}</div>;
}
In this example, useSWR will only send one request to /api/some-data
on the initial mount of the component and will use the cached data for subsequent renders.
Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss
Asked: 2021-07-14 11:00:00 +0000
Seen: 9 times
Last updated: Jul 21 '21