Can I fetch data only once when using swr?

For example, I switch to different page using react router:

const Apage = () => {
    const { data, error } = useSWR('/a-data', fetcher);
    return (
        <div>{data}</div>
    );
};

const Bpage = () => {
    const { data, error } = useSWR('/b-data', fetcher);
    return (
        <div>{data}</div>
    );
};

With swr, I can get data immediately when I’m not the first time access the page.
But still, it calls the api to fetch data each time I access the page.

Can I only fetch data once if I dont need to revalidate the data is stale or not?

4 thoughts on “Can I fetch data only once when using swr?”

  1. SWR concept is based on hooks. That means it means to use with local state, not for global state like mobx/redux/etc. Of course you can use with global state via React Context by creating your custom context. But you will prefer to use mobx/redux instead right?

    So this is a caching strategy. If you prefer cache in memory, use mobx/redux. Otherwise, store in localStorage/cookie/etc.

    Reply
  2. Just use dedupingInterval, like:

       const { data } = useSWR(
            `https://api.thecatapi.com/v1/breeds?api_key=51e7b5a4-3b54-4fdf-a61a-84b653d85f8a`,
            fetcher,
            {
                dedupingInterval: 1000000,
            }
        );
    
    Reply
  3. SWR 0.3.8

    You should prevent automatic revalidation which is controlled by the next options:

    {
      revalidateOnFocus: false,
      revalidateOnMount:false,
      revalidateOnReconnect: false,
      refreshWhenOffline: false,
      refreshWhenHidden: false,
      refreshInterval: 0,
    }
    

    According to the documentation refreshWhenOffline, refreshWhenHidden and refreshInterval are disabled by default, so it’s enough only to set:

    {
      revalidateOnFocus: false,
      revalidateOnMount:false,
      revalidateOnReconnect: false,
    }
    

    This will restrict SWR from running the fetching method. However, you still need the first one run to get your data.

    You may end up with something like this:

    const useStaleSWR = (dataKey) => {
      const revalidationOptions = {
        revalidateOnMount: !cache.has(dataKey), //here we refer to the SWR cache
        revalidateOnFocus: false,
        revalidateOnReconnect: false,
      };
    
      return useSWR(dataKey, fetcher, revalidationOptions);
    }
    

    SWR cache is exposed since 0.2.0 version


    After all, I do not recommend using SWR for this purpose. SWR built to fetch data again. If you have static data – fetch once and store in session/local storage or define your own cache.

    Reply

Leave a Comment