TanStackT
TanStack•3y ago•
24 replies
clean-aquamarine

Offline Cache Not Working with UseSuspenseQuery

Hello!

Im trying to test my apps offline capabilities and I'm having two issues:
1. I have gctime set to a really long time along with the persistor setup (code at the bottom). When I simulate offline mode in the devtools and refresh the page, everything is fine. The app loads the old data and tries to make requests. When the requests fail though, the queries get ejected out of localstorage, and when I refresh for the second time, I get an error thrown
2. I'm using react-query + trpc. For some reason when the queries fail they throw an exception outside of react query. Is this because I'm using suspense queries? I'd like for it to ignore as if its nothing happened if the request fails (assuming there is old data). Here is a sample stack trace
TRPCClientError-0de4d231.mjs:38  Uncaught TRPCClientError: Failed to fetch
    at TRPCClientError.from (TRPCClientError-0de4d231.mjs:38:16)
    at httpUtils-f58ceda1.mjs:129:17

This might be connected to the second refresh of #1 so ill retry after figuring that out

Code:
const persistOptions: Omit<PersistQueryClientOptions, 'queryClient'> = {
  persister: asyncStoragePersister,
};

export const queryClient = new QueryClient({
  queryCache: new QueryCache({
    onError(error, query) {
      logger.error(`[${query.queryKey.toString()}] error: `, error.message);
      Sentry.captureException(error, {
        extra: {
          queryKey: query.queryKey,
        },
      });
    },
  }),
  defaultOptions: {
    queries: {
      gcTime: ms('1 day'),
      refetchOnWindowFocus: false,
      retry: false,
      // throwOnError: false,
      // placeholderData: keepPreviousData,
    },
  },
});
Was this page helpful?