cacheTime vs staleTime

[nanandn]

Hi,

The default staleTime is 0. I don't want to fetch every time the component re-renders, but want to fetch only when the cache is invalidated. So if I set the staleTime to a value larger than the cacheTime, will fetch be called when the cache expires, thought the query is not stale?

Thanks
Anand

[TkDodo]

I don't want to fetch every time the component re-renders

This seems to be a common misconception: react-query doesn’t do that - that would be insanely expensive. Please read https://react-query.tanstack.com/docs/guides/important-defaults - it outlines when exactly a stale query is re-fetched and how to control it.

So if I set the staleTime to a value larger than the cacheTime, will fetch be called when the cache expires, thought the query is not stale?

CacheTime only affects inactive queries - those that have no subscribers. They will be kept in the cache for that time and re-used if a new subscriber shows up within that time.

[nanandn]

@TkDodo Thanks for the reply. I think it looked like the data was being fetched on every re-render because of refetchOnWindowFocus config. Once I set that to "false", re-fetch is not happening anymore. If I see the problem again, I will ask again... :-)

[nanandn]

@TkDodo I think I found the scenario where the query is executed again.. I have two views on the page that's making the same query. The reason I do that is I don't want to pass props down the component hierarchy...

In this scenario, the query is executed twice, though the data is in the cache. How do I avoid that?

Anand

[TkDodo]

I don’t think this should happen ... could you provide a minimal codesandbox that shows the issue maybe?

[PepijnSenders]

You might be calling the fetch function outside of react-query, I'm thinking it might be this:

const { data } = useQuery('my-data-call', fetchData());

vs.

const { data } = useQuery('my-data-call', () => fetchData);

[nanandn]

No. I call it like const {data} = useQuery("my-data-call", fetchData);

[nanandn]

I think, in some ways it makes sense, because two different views are invoking the query. Since the staleTime is 0, the second invocation will return the data in the cache, but still execute the query. I don't know if that's how react-query is implemented. I was thinking like the "cache-and-network" strategy in apollo client.

So that what my initial question about staleTime/cache time was.

[nanandn]

I think it is due to "refetchOnMount". The default is "true", When I set it to "false", the second invocation of the query does not refetch.

Anand

[TkDodo]

Since the staleTime is 0, the second invocation will return the data in the cache, but still execute the query. I don't know if that's how react-query is implemented.

It is. The strategy is called stale-while-revalidate.

I think it is due to "refetchOnMount". The default is "true", When I set it to "false", the second invocation of the query does not refetch.

Yes, stale queries are re-fetched in the background whenever a new component mounts.

So it looks like you have one view that mounts and queries the data, and then when the data is received, you mount a second view. In that case the background refetch is expected. If the second view mounts because the first view renders it when it has data, you can also try setting the staleTime to something like 5 seconds to avoid the second request.

I thought you had two views that mount at the same time, in which case you should only see one request, even with the default settings.

[ljmerza]

hello, im still having a little difficultly seeing the difference between cacheTime vs staleTime after reading the defaults doc.