T
TanStack•4mo ago
foreign-sapphire

Is it expected behavior that polling queries ignore offline mode?

Hey guys, I am setting up offline mode in my React app but it isn't working as expected. After 2 minutes, the whole local cache is cleared for some reason I haven't figured out, all queries get executed and fail because im in offline mode, which resets the cache somehow. Also, polling queries don't seem to respect offline mode and keep making requests. Is this by desin? Here is my setup: 
export const persister = createAsyncStoragePersister({
  storage: window.localStorage,
});

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60_000, // 1 minute
      networkMode: 'offlineFirst',
      gcTime: 1000 * 60 * 60 * 8, // React Query default behavior is to discard cached data after 5 minutes, we want to keep it for 8 hours since our application is offline first
    },
    mutations: {
      networkMode: 'offlineFirst',
    },
  },
});

<PersistQueryClientProvider
  client={queryClient}
  persistOptions={{
    persister,
  }}
  onSuccess={() => {
    // Resume mutations after initial restore from localStorage was successful
    queryClient.resumePausedMutations();
  }}
>
...
</PersistQueryClientProvider>
export const persister = createAsyncStoragePersister({
  storage: window.localStorage,
});

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60_000, // 1 minute
      networkMode: 'offlineFirst',
      gcTime: 1000 * 60 * 60 * 8, // React Query default behavior is to discard cached data after 5 minutes, we want to keep it for 8 hours since our application is offline first
    },
    mutations: {
      networkMode: 'offlineFirst',
    },
  },
});

<PersistQueryClientProvider
  client={queryClient}
  persistOptions={{
    persister,
  }}
  onSuccess={() => {
    // Resume mutations after initial restore from localStorage was successful
    queryClient.resumePausedMutations();
  }}
>
...
</PersistQueryClientProvider>
3 Replies
wise-white
wise-white•4mo ago
Maybe what you need is this: https://tanstack.com/db/latest
TanStack DB
TanStack DB extends TanStack Query with collections, live queries and optimistic mutations that keep your UI reactive, consistent and blazing fast 🔥
wise-white
wise-white•4mo ago
And in one of the examples, I see that retry is set to 0. https://tanstack.com/query/latest/docs/framework/react/examples/offline?path=examples%2Freact%2Foffline%2Fsrc%2FApp.tsx
React TanStack Query Offline Example | TanStack Query Docs
An example showing how to implement Offline in React using TanStack Query.
foreign-sapphire
foreign-sapphireOP•4mo ago
Hey! Thanks for helping out! I don’t think that the retry option is the issue here. I did some additional investigation and for some reason the online manager which is provided by RQ remains true (meaning the app is online while offline mode is activated in the browser) Can’t use tanstack db since it is not stable and still experimental.

Did you find this page helpful?