Triggering immediate refetch on refresh with persistQueryClient

[GarrisonBates]

I'm using PersistQueryClientProvider to persist my data in localStorage. My intended use was that I could use the locally-cached data as a placeholder while the data fetches in the background, and provide a fallback if a user is offline.

However, as I've been using it I've noticed that it doesn't behave exactly as I had anticipated. For instance, when I refresh the page, my queryCaches are rehydrated from localStorage, and no fetch requests are made to update the data, whereas I had thought it would rehydrate from localStorage and then refetch in the background.

Upon further reading I understand (correct me if I'm wrong) that staleTime persists through refreshes, and so if I have a non-zero staleTime data will be rehydrated from localStorage and won't be refetched (since it's considered fresh).

But I want the data to be immediately refetched when the page is refreshed, just as it would if I wasn't using the persist API, so that users can always refresh to get the latest version of anything. I've tried setting refetchOnReconnect: 'always' in my queryClient, but this doesn't change the behavior. Is there any way aside from changing my staleTime or adding in manual refetches to achieve the behavior I'm looking for?

Thanks very much!

[TkDodo]

whereas I had thought it would rehydrate from localStorage and then refetch in the background.

it should refetch in the background if the data is considered stale, so it depends on your staleTime setting. You can also call queryClient.invalidateQueries() in the onSuccess handler of the QueryClientProvider to force a refetch of everything.

[GarrisonBates]

Thank you!