PersistQueryClientProvider performance question

[joshbtay]

Navigating around our app is pretty slow right now. It seems that a significant chunk of time is spent caching data in IndexDB. Here's the profiling:

here's what we're using for IDB persistence (basically just the example):

export function createIDBPersister(idbValidKey: IDBValidKey = "reactQuery") {
  return {
    persistClient: async (client: PersistedClient) => {
      console.log("storing client state. number of queries stored ", client.clientState.queries.length);
      await set(idbValidKey, client);
    },
    restoreClient: async () => {
      return await get<PersistedClient>(idbValidKey);
    },
    removeClient: async () => {
      await del(idbValidKey);
    },
  } as Persister;
}

And then, in our app.tsx, we're using these options:

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      gcTime: 1000 * 60 * 60 * 24, // 24 hours
    },
  },
});

...

    return (
      <PersistQueryClientProvider
        client={queryClient}
        persistOptions={{
          buster: apiPackage.version,
          persister: createIDBPersister(),
          maxAge: 1000 * 60 * 60 * 24,
        }}
        onSuccess={() => console.log("Mounted persist query client provider!")}
      >
        ... app code ...
      </PersistQueryClientProvider>
    );

What I can't figure out is this: Why is the set() method getting called so much? It's getting called even before the first trpc responses come through. It's getting called maybe 25 times per navigation. For reference, here's the browser's console:

I notice the client is passed into the set method. Wouldn't that basically serialize all of the data in the app every time it gets called?
Is there a way to basically set only the new query responses, and not just all query responses?

[TkDodo]

Wouldn't that basically serialize all of the data in the app every time it gets called?

yes, because we store it in one storage entry. for fine grained persistence, please checkout the createPerister api: https://tanstack.com/query/v5/docs/framework/react/plugins/createPersister

there are tradeoffs in both approaches

[TkDodo]

oh and you can pass a throttle time to the persister to make it not write as often

[joshbtay]

Ah ok perfect, this is what I was looking for. And btw, how do you pass a throttle time to the persister? i'm having trouble understanding how to use from the docs

[TkDodo]

it's an option for when you call createSyncStoragePersister or createAsyncStoragePersister:

https://tanstack.com/query/v5/docs/framework/react/plugins/createSyncStoragePersister#options

if you build your own persister, you are on your own

[TkDodo]

but for idbKeyVal you can just use the Async persister. No need to write your own I think

[metkm]

I really don't want to care, but there should be a better way for this, lol. This is the exact same reason the Spotify app on desktop sucks ass after a week of usage. You can see the reason for this if you open DevTools using Spicetify.

This performance graph is for a single click, changing playlists. All the anonymous calls are because of react query persistence. the same code the OP posted here. It adds more than 1.5 seconds of delay to changing pages.