And then, in our app.tsx, we're using these options:
\nconst queryClient = new QueryClient({\n defaultOptions: {\n queries: {\n gcTime: 1000 * 60 * 60 * 24, // 24 hours\n },\n },\n});\n\n...\n\n return (\n <PersistQueryClientProvider\n client={queryClient}\n persistOptions={{\n buster: apiPackage.version,\n persister: createIDBPersister(),\n maxAge: 1000 * 60 * 60 * 24,\n }}\n onSuccess={() => console.log(\"Mounted persist query client provider!\")}\n >\n ... app code ...\n </PersistQueryClientProvider>\n );\nWhat 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:
\n
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?
\nIs there a way to basically set only the new query responses, and not just all query responses?
\n\nWouldn't that basically serialize all of the data in the app every time it gets called?
\n
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
","upvoteCount":2,"url":"https://github.com/TanStack/query/discussions/6794#discussioncomment-8308173"}}}
-
|
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): And then, in our app.tsx, we're using these options: 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? |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 4 replies
-
yes, because we store it in one storage entry. for fine grained persistence, please checkout the there are tradeoffs in both approaches |
Beta Was this translation helpful? Give feedback.
-
|
oh and you can pass a |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
it's an option for when you call https://tanstack.com/query/v5/docs/framework/react/plugins/createSyncStoragePersister#options if you build your own persister, you are on your own |
Beta Was this translation helpful? Give feedback.
-
|
but for |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
yes, because we store it in one storage entry. for fine grained persistence, please checkout the
createPeristerapi: https://tanstack.com/query/v5/docs/framework/react/plugins/createPersisterthere are tradeoffs in both approaches