Keep query cache between SPA pages

[Alecell]

I'm pretty new to react-query and, on my use case, I want to keep the response cache between 2 different pages/routes.

Let's suppose a scenario that you have 2 pages, each page renders a different content than the other and have different component files too.

On a scenario that we access /foo and get the first 10 items of foo;
We move now to another page of the same app, /bar, getting the first 10 items too;
Moving again to /foo, the 10 first items are requested again.

Is there a way to keep the request data even when change route just like redux?

[TkDodo]

the data for /foo will still come from the cache, but react-query will make a background refresh to update the data in case it has changed. Unless you come back to /foo after more than 5 minutes (which is the default cacheTime), because after that, the data will be gargabe collected. You can increase cacheTime if you want.

if you really don't want the background updates, it's best to set a staleTime for your query. It will tell react-query for how long data is considered to be fresh, and as long as it's fresh, no background refetches will happen.

[Alecell]

When I face that issue I believe that I don't wait that long, but I'll try again.
But is there a way to control the recache/re-request manually instead of time-based?

[TkDodo]

if you turn off refetchOnMount, it will stop doing background refetches when a new subscriber mounts.

react-query is declarative per default, so you usually don't need to worry about "if this and that happens, I want to refetch". that approach is usually manual and error-prone. Of course you can turn off everything by setting staleTime: Infinity, turn off all the refetch flags and spawn useEffects manually and do queryClient.invalidateQueries, but I would advise against that :)

[Alecell]

I understand, but really thank you, this helps a lot