How does refetchOnReconnect really works, in particular when combined with sync storage persister

[jlap]

Hello Everyone.

I work on an app where we are careful to limit our api calls. General behavior we wish for is to cache data locally for as long as possible, and thus we use tanstack along with syncStoragePersister in order to save the data in the localstorage. If you refresh your browser, we wish to pull the data from the localstorage for as long as the data isn't considered stale, but then refetch on refresh if the data is stale when opening the app.

I thought setupping my query with refetchOnReconnect: true, and every other refetch option to false would lead to this behavior. It however does not refetch the data from the api when the page reloads, and it serves the stale data from the localstorage instead. If I instead use refetchOnMount, the data is indeed refetched if i refresh my page and the data is stale.

The problem with refetchOnMount, is that the data will be refetched automatically once the data is stale if the user keeps browsing the application. In our case is it unnecessary, I would have preferred to avoid it.

In the end of the day, my real question is:

What is refetchOnReconnect used for? What is considered a reconnect? The documentation is not helping me understand, sadly :(

thanks in advance to anybody who helps me understand <3

[TkDodo]

reconnect is for when you lose network connection (going offline) and then re-gaining it (going online again).

If you refresh your browser, we wish to pull the data from the localstorage for as long as the data isn't considered stale, but then refetch on refresh if the data is stale when opening the app.

you can keep all the flags off and just do a queryClient.refetchQueries({ stale: true }) in the onSuccess callback of the PersistQueryClientProvider.

[jlap]

Thank you for your answer! We're using vue so I'm currently looking for where I could use this refetchQueries function, it does what i want if i naively tie it for a button for example, so that's good.

I'm now searching where to correctly hook myself for the invalidation. The persister has dehydrateOptions shouldDehydrateQuery function that can be used to decide if things should be dehydrated, but there doesn't seem to be an equivalent at hydration time.

[jlap]

using the maxage would probably have worked, but our queries do not all have the same stale time, and it seems the persister can only have a global maxage