Whats the recommended way for useQuery not to fetch when offline?

[Manouli]

I have a useQuery which I store to the AsyncStorage using the persistQueryClient. When I turn the network off, the cached data comes back but a fetch is happening in the network tab and as a result the next time I close the app and reopen it we have no cache on the query.

I found a way to stop this fetch by using the enabled option combined with the useNetInfo hook from the react-native-netinfo package. Example below:

  const { isConnected } = useNetInfo();
  const { data } = useQuery(
    queryKey,
    () => getData(),
    {
      enabled: isConnected ?? false,
      networkMode: 'offlineFirst'
    }
  );

But I am wondering if there is a better way to achieve this. Thank you in advance!

[TkDodo]

given that you are using networkMode, I assume you are on v4. The default networkMode of 'online' should do what you want here. It expects you to be online to trigger a query, and if not, the query will go into paused state while still giving you data from the cache.

but a fetch is happening in the network tab and as a result the next time I close the app and reopen it we have no cache on the query.

that seems a bit weird to me. Once you have data in the cache, we don't remove it. Maybe the query transitions to an error state and persistQueryClient doesn't include erroneous queries, as per default only successful queries are included:

https://github.com/tannerlinsley/react-query/blob/19861272f57da5e587bce5bff449d0c3020243e0/src/core/hydration.ts#L72-L74

[Manouli]

Hi @TkDodo now that makes sense. I had my getData function returning an error and rejecting the promise which was causing this! Turns out that online works great in my case! Thank you very much once again 🙏

[Manouli]

@TkDodo just for reference that was the error that I was getting:

So that was causing the query to error when the network was off. When I would shut the app and then reboot it on the simulator the getData function would re-trigger. Could that also maybe be because it fetch on mount by default?

[TkDodo]

yes that error is "expected" because with offlineFirst, one request is made, to check if there are any cached responses in e.g. the browser cache. retries are then paused. maybe you have turned off retries, in which case you would get an error state with this error. And since erroneous queries are not persisted, you would get a fresh fetch on the next mount without any cached data.