PersistQueryClientProvider & Offline Mode

[thedivac]

I've used react-query and a service worker to create a basic offline mode for my React SPA. The SPA is also used inside of a react-native-webview to create a simple mobile app for iOS and Android.
It all works great, with one exception:

When I open my app while I have no internet connection, the PersistQueryClientProvider loads the persisted queries and triggers a refetch of all data.

What I was expecting:
Since I am offline I would expect the queries to use the persisted (but stale) data and go into paused state. Basically, I would expect the same behavior as when I lose the internet connection while using the app.

What really happens
All queries trigger a data fetch which fails since I don't have a internet connection. This leads to UI issues since now I have errors where before it would only be a paused state.

Is this behavior intended? Is there a way for me to change it?

[thedivac]

I've been digging a litte more, and it seems like the persister automatically sets the network mode to "offlineFirst". It's mentioned in the docs that this is required for restoring the query cache. Unfortunately this seems then also to trigger a refetch, even when offline.

I still have no idea though if I can fix this issue somehow...

[thedivac]

I think I accidentally found a fix when debugging the issue.

if (!navigator.onLine) { onlineManager.setOnline(false); }

Adding this code in the root of my app will set the onlineManager to offline before the react app mounts the component tree. I think there's an issue because the onlineManager always starts off with "online".

[TkDodo]

this was a deliberate change in v5 because navigator.onLine is buggy and unreliable.

https://tanstack.com/query/latest/docs/framework/react/guides/migrating-to-v5#network-status-no-longer-relies-on-the-navigatoronline-property