#Loaders fetch on page reload while using PersistQueryClient

3 messages · Page 1 of 1 (latest)

lilac jay
#

Hello,

I’ve isolated an interaction between TanStack Query persistence and loaders and I’m not sure if I’m misconfiguring something.

So the problem is that while using PersistQueryClientProvider, if I reload the page on the route whose loader calls queryClient.prefetchQuery (or similar), it always triggers a fetch even though there is fresh data ready from storage.

Here's a simple demo: https://codesandbox.io/p/devbox/ecstatic-matsumoto-2kps89?workspaceId=ws_5qNu8F9bhpwbr16C5L8DF6

In the code example there is an index route that doesn't have a loader, and there is no refetch on page reload.
But if u reload while on the "test" route which has a loader, there is always a background refetch.

halcyon trout
#

probably a question for #1020327831592509480
the loader is running outside of react so it wont use the PersistQueryClientProvider

lilac jay
#

Can we avoided like this, for anyone wondering:

const PersistGuard = ({ children }: { children: ReactNode }) => {
  const isRestoring = useIsRestoring();
  return <>{isRestoring ? null : children}</>;
};

<PersistGuard>
  <RouterProvider router={router} />
</PersistGuard>