refetchOnMount and queryClient.invalidateQueries() do not work as expected when using experimental_createQueryPersister

[willwillems]

Describe the bug

When using the persistor, what we wanted to do was serve up the stored data as stale and immediately refetch. That is not the default behavior, so what we tried to do is set refetchOnMount to 'always'. This does not make it refetch on initial mount.

The second thing we tried is: when our app loads we invalidate all queries using queryClient.invalidateQueries(). But queries that haven't initialized yet are not invalidated. When not using the persistor, this makes total sense, but when you are using it, this leads to some very unexpected behavior.

Your minimal, reproducible example

https://stackblitz.com/edit/tanstack-query-xma74mr5?file=src%2FPosts.vue

Steps to reproduce

1. Go to page
2. Refresh page within 5m (stale time)
3. Data is not re-fetched on page load

Expected behavior

I expect queryClient.invalidateQueries() or refetchOnMount: 'always' to make the data stale and refetched.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS mac OS
• Browser Chrome & FF

Tanstack Query adapter

vue-query

TanStack Query version

5.89.0

TypeScript version

No response

Additional context

I love Tanstack Query and wanna use it but I just want the functionality like SWRV where the page initially loads with local storage data (that is marked as stale) and then immediately begins re-fetching.

[TkDodo]

refetchOnMount: 'always' should achieve that. the problem is that we only check for query.isStale() in the persister to trigger a refetch:

query/packages/query-persist-client-core/src/createPersister.ts

Lines 207 to 209 in a0b96db

	if (query.isStale()) {
	query.fetch()
	}

refetchOnMount is an observer level property, and this would only work if the restore process would be initiated by an observer that has refetchOnMount set. However, we don’t have access to observer options in the persister. We could look at all observers of the query (query.observers), to see if any of them have refetchOnMount set, which might work.

One other idea could be to extend the createQueryPersister functions to add a property that determines how we refetch after data has been loaded.

That said, with the default of staleTime: 0, you should see a refetch after restoring. But yeah, with a staleTime set like in your example, that would be the only refetch indicator right now.