can refetchOnMount work with all queries?

[donysukardi]

i'm wondering if there's any out of the box way to make the following setup work with all queries, not just the first query.

{
  staleTime: Infinity,
  refetchOnMount: 'always',
}

the use case is that as long as user is on current page, the query data is all reused. a workaround i can think about is to add some sort of uuid as query key to differentiate the different mount instances.

[TkDodo]

I don't understand - why does it only work with "the first query"? What is the first query vs the second query?

[donysukardi]

The query keys when mounted, e.g.

useQuery([QueryKey, { page: 1 }], /* */, {
  staleTime: Infinity,
  refetchOnMount: true,
})

if page changes to 2, it won't be refetched

[TkDodo]

okay so I'm assuming that:

• you have data for page 1
• you have data for page 2
• you switch from page 1 to page 2
• you want to refetch even though the data is fresh due to infinite staleTime?

I'm afraid that's something that's not possible out of the box, because refetchOnMount only calls for "mounts". Changes to the query key are separate.

What you can do is mark the page 2 query as stale with invalidateQueries before transitioning to page 2, then you'll get a normal background refetch once the key changes.

[donysukardi]

Something like that. The use case is just reusing cached data as long as user is on the same page (same mounted instance of useQuery hook), but if they navigate away and come back, we want to refetch.

Currently the solutions that i could think of:

• Include unique id as part of the query key. But this leaves the data in the cache even though they're almost guaranteed won't be used anymore

const uuid = useUuid();
const pageQuery = useQuery(['QueryKey', { uuid, /* someParams */ }, { /* options */ });

• Invalidate all queries with the base query key when unmounting

useEffect(() => {
  return () => queryClient.invalidateQueries(['QueryKey']);
}, [])

[TkDodo]

Invalidate all queries with the base query key when unmounting

that sounds good