Retrieve data from cache after execute the refetch() function

[buglessir]

I've a query with these options:

staleTime: 5 * 60 * 1000
cacheTime: 15 * 60 * 1000
enabled: false

but if I call refetch() before 5 minutes (expected stateTime) I see new API call in DevTools -> Network and react-query doesn't retrieve data from cache!
Therefore I created this helper function:

export const CheckCacheData = async (key, fetcher) => {
  const cacheIsAvailable = ReactQueryClient.getQueryData(key);
  if (cacheIsAvailable) {
    return cacheIsAvailable;
  } else {
    const { data } = await fetcher();
    return data;
  }
};

Actually my code works well, but I've doubt on this scenario which is best practice or not?
I thought react-query supports cache retrieval by default with staleTime and cacheTime but apparently it's not correct...
Do you have any idea?

[TkDodo]

It does, but using enabled: false + refetch bypasses that and takes you into "imperative fetching" mode. Calling refetch will refetch every time.

why are you working with disabled queries? Usually, there are other ways to solve problems that are more idiomatic for react-query.

[buglessir]

Thanks, actually I created custom hooks to handle fetches by react-query and sometimes we use button to load data and runtime fetches are not required... But what about enabled: true for custom fetching hooks with an ID?
For example:

const useFetchProduct = (productId) {
    const product = useQuery(['product', productId], fetcherFunctionHere....)
    .
    .
    .
}

It gets error if productId is undefined, actually I used enabled: false to check IDs by useEffect and refetch query if ID is not undefined

For example:

export const useFetchProduct = (productId) => {
  const { data, error, isLoading, refetch } = useQuery(['product', productId], () => fetcher(productId));

  useEffect(() => {
    if (productId) {
      refetch();
    }
  }, [productId]);

  return {
    data,
    error,
    isLoading,
    refetch,
  };
};

So, what do you think about useFetchProduct ? has written by best practice? or I should change the scenario for custom hooks?

[TkDodo]

You can set enabled: !!productId, in which case the query will automatically enable and fetch as soon as you have a productId

[buglessir]

You can set enabled: !!productId, in which case the query will automatically enable and fetch as soon as you have a productId

What about queries without ID? for example, fetching a list by clicking on a button and shouldn't execute at runtime. How can I handle retrieving data from cache in this case?

[buglessir]

@TkDodo
by the way, I've an idea... what about an additional option to handle cache for refetch? something like hasCondition: true or retrieveCache: true

[TkDodo]

What about queries without ID? for example, fetching a list by clicking on a button and shouldn't execute at runtime. How can I handle retrieving data from cache in this case?

pretty much like this: https://twitter.com/TkDodo/status/1374452337046032395