How to avoid data refetch after there is no active instance of the query.

[jsomdev]

Hello all!

I am fetching data on the homepage that will most likely not change during a user session. When going back and forth between the homepage and another page,(using React-Router Lazy Loading), that data is fetched again because there is no active instance after switching to the other page.

I don't want this to happen. Because, if possible, I want to avoid network requests whenever possible.

Based on my understanding of the docs, using QueryObserverOptions property staleTime, would be my best guess here.

What's your thoughts on this? How do you approach this?
I'm looking for some insights on the matter!

Thanks in advance!

[TkDodo]

yes, the best approach is to set a staleTime on your query. It defines when the query transitions from fresh to stale, and only stale queries will be smartly re-fetched in the background. So if your data never changes, you can do staleTime: Infinity, or choose any high-enough number that you want.

Also, keep in mind that if you query is inactive (meaning there is no active observer, like useQuery, that is currently rendered on the screen), it will be garbage collected after cacheTime, which is 5 minutes per default. So if you navigate away from a page what uses a query, and then come back after that time, you will see a hard loading state again because the cache entry has been removed. You can also customize that time.

[jsomdev]

Thank @TkDodo.

Does the second part of your answer imply that I will need to set cacheTime and staleTime to Infinity if I want to prevent that data from being refetched?

[TkDodo]

if you want to prevent it from ever being refetched and never garbage collected then yes.