what am i misunderstanding about persisting the cache?

[dadamssg]

I'm using react-router-dom, react-query, react-query-persist-client, and query-sync-storage-persister. I set it up based on the docs. I have a default cacheTime of 24 hours and a default staleTime of 23 hours just to test. In my root route loader i'm using queryClient.ensureQueryData() with no custom cacheTime/staleTime. I would expect to be able to refresh the tab and the fetch would not happen after the first load. I would expect it to pull the data from the cache. What am i misunderstanding?

Here's a repro:
https://codesandbox.io/p/sandbox/eager-lake-cq952g?embed=1&file=%2Fsrc%2Findex.jsx%3A43%2C34

If you open the console, you'll see a "fetching" log every time you refresh the tab.

[TkDodo]

I'm pretty sure the loader is called before the PersistQueryClientProvider has finished restoring the app from localStorage. useQuery has a built-in mechanism to detect this, but queryClient.ensureQueryData does not.

Best thing you can do is probably build a <PersistGate> component that defers rendering until the restore is finished, and then render your RouteProvider inside:

import { useIsRestoring } from '@tanstack/react-query

function PersistGate({ children, fallback = null }) {
  const isRestoring = useIsRestoring()

  return isRestoring ? fallback : children
}

[dadamssg]

@TkDodo thanks for the response. Unfortunately that doesn't work. I updated the sandbox: https://codesandbox.io/p/sandbox/eager-lake-cq952g?embed=1&file=/src/index.jsx:6,23

[TkDodo]

loader is called before PersistGate renders (add a log statement to the loader function). It's even called if I don't even render the router:

    <PersistQueryClientProvider
      client={queryClient}
      persistOptions={{ persister }}
    >
      <div>hello world</div>
    </PersistQueryClientProvider>

seems like an issue with react-router. Maybe createBrowserRouter eagerly calls the loader for the root route, idk...

[dadamssg]

i think i figured it out 😅

I think you're right about react router issuing the loader request before isRestoring was false. So i used your PersistGate idea but create/memo the router instance in the component:

const createRouter = () => createBrowserRouter([...])

function PersistGate({ children }) {
  const isRestoring = useIsRestoring();
  const router = React.useMemo(
    () => (!isRestoring ? createRouter() : null),
    [isRestoring]
  );
  return !router ? <div /> : <RouterProvider router={router} />;
}

I also had a problem with what i was returning from the loader/ensureQueryData. I was taking advantage of react router loaders being able to extract the json if you return the whole Response object. react-query obviously wasn't able to cache that properly.

Sandbox with fixes: https://codesandbox.io/p/sandbox/friendly-spence-vzvnjw?embed=1&file=%2Fsrc%2Findex.jsx%3A57%2C1

Phew!

[dadamssg]

Just kidding. I did not solve it. Adding a staleTime: 0 to the ensureQueryData() doesn't do anything. It always pulls from the cache

[dadamssg]

hmm i think cacheTime is what i need to be using for ensureQueryData(). staleTime doesn't seem applicable for ensureQueryData() the more i think about it. would you agree @TkDodo ?

[dadamssg]

instantiating the router in useMemo while using react's strict mode results in loaders being called twice. ugh

[dadamssg]

ok this is what i'm going with:

import React from "react"
import ReactDOM from "react-dom/client"
import { persistQueryClient } from "@tanstack/react-query-persist-client"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { createHashRouter, RouterProvider } from "react-router-dom"
import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister"
import { Root } from "~/Root"

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      cacheTime: 1000 * 60 * 60 * 24, // 24 hours
      staleTime: 1000 * 60 * 5, // 5 minutes
    },
  },
})

void (async function main() {
  // await the promise that lets us know the cache hydration is complete
  await persistQueryClient({
    queryClient,
    persister: createSyncStoragePersister({ storage: window.localStorage }),
  })[1]

  // create the router *after* cache is hydrated so loaders occur after
  const router = createHashRouter([
    {
      path: "/",
      element: <Root />,
      id: "root",
      loader: async () => {
        return await queryClient.ensureQueryData({
          queryKey: ["data"],
          queryFn: async () => {
            const res = await fetch("https://domain.com/api/data")
            return await res.json()
          },
        })
      },
    },
  ])

  ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
    <React.StrictMode>
      <QueryClientProvider client={queryClient}>
        <RouterProvider router={router} />
      </QueryClientProvider>
    </React.StrictMode>
  )
})()

The PersistQueryClientProvider doesn't work well with react-router-dom's loaders.

The docs say this about using persistQueryClient direclty:

Further, if you subscribe to changes outside of the React component lifecycle, you have no way of unsubscribing:

but i looked at the code and the only unsubscribe i see is use in a useEffect with a single dependency that is the query client instance. I don't think my app will ever need to unsubscribe

[TkDodo]

@dadamssg I think this is the solution I would prefer:

https://codesandbox.io/p/sandbox/vigorous-wildflower-7khqlw?embed=1&file=/src/index.jsx:59,2

The idea is to create the router inside the react component (in state, not memo), but in a child component that will only be rendered below the PersistGate.

[dadamssg]

@TkDodo interesting. I had not read that article before. I wouldn't have thought my router instance would be an appropriate state value. I've always been under the impression that you shouldn't keep rendered elements in state. That state is only for serializable data. TIL.

[TkDodo]

That state is only for serializable data.

maybe you have that confused with redux, where they teach to only have serializable state. You can put anything in useState :)

[dberardo-com]

i am also very confused with the persist mechanism, perhaps the doc is not so explicit to me.

my problems:

• stale time seems not to be considered ,... somehow all my queries become cached and persisted indefinitely
• is it possible to activate persistency only on some queries? i really would like to limit the usage of localstorage to only a few special cases
• i see a "persister" argument in the queryClient.fetchQuery interface ... what is that for ? can we inject a persister there without the need of using a complete new Provider in the app ?

[TkDodo]

stale time seems not to be considered ,... somehow all my queries become cached and persisted indefinitely

stale time does something differently. You need to look at gcTime and the maxAge property of the persister itself.

is it possible to activate persistency only on some queries? i really would like to limit the usage of localstorage to only a few special cases

yes, with dehydrateOptions: { shouldDehydrateQuery: () => ... }

i see a "persister" argument

that's the new experimental createPersister that works differently: https://tanstack.com/query/latest/docs/framework/react/plugins/createPersister