Keeping a query in the cache even though it's not mounted?

[ghost]

I'm using react-query to keep a normalized cache from the server. However, I'm running into a minor issue where when I normalize the results of a useInfiniteQuery, the items that do not appear on screen get evicted from cache after cacheTime.

I don't necessarily want to refetch these, I just want react-query to know that one reference to those items are due to useInfiniteQuery even if the results are not on screen: is it possible to do something like this without having to use useQuery to indicate it? Thanks!

[TkDodo]

the items that do not appear on screen get evicted from cache after cacheTime.

yes, that is what cacheTime does. If there are no observers anymore (all useQueries are unmounted), the data will be garbage collected after cacheTime. So increasing cacheTime should help.

Or are you saying that e.g. page 3 of a mounted infiniteQuery will be removed somehow? Not quite sure what you mean with “do not appear on screen”...

[ghost]

I'm trying to keep a normalized cache in react-query by using setQueryData on the results of useInfiniteQuery to cache them as individual entities, then using useQuery on the keys I've set. I'm also trying to use this in combination with virtual scrolling, so not all of these components that are using useQuery are mounted, even though they are all part of the useInfiniteQuery: they then unfortunately get refetched when cacheTime expires.