ygor perez
ygor perez2y ago

how to persist the query client?

I want to persist the trpc query client cache, but don't want to create a new query client, I want to use the one trpc already creates. Is this doable?
13 Replies
Nick
Nick2y ago
I assume you’re on NextJS? This is really a question that react-query docs probably have the answer to, and if withTRPC doesn’t expose the right stuff to set it up you should open a GitHub issue 🙂
ygor perez
ygor perez2y ago
Thank you for the reply, yes I'm on NextJS 13 without the app directory.
import { persistQueryClient } from '@tanstack/react-query-persist-client'
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'

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

const localStoragePersister = createSyncStoragePersister({ storage: window.localStorage })
// const sessionStoragePersister = createSyncStoragePersister({ storage: window.sessionStorage })

persistQueryClient({
queryClient,
persister: localStoragePersister,
})
import { persistQueryClient } from '@tanstack/react-query-persist-client'
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'

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

const localStoragePersister = createSyncStoragePersister({ storage: window.localStorage })
// const sessionStoragePersister = createSyncStoragePersister({ storage: window.sessionStorage })

persistQueryClient({
queryClient,
persister: localStoragePersister,
})
This is how you use the persistQueryClient from the docs, I would like to know if there is a way to get the queryClient from TRPC in v10
Nick
Nick2y ago
I’m not much of a next user so haven’t played with the HOC we provide. Probably useQueryClient though from RQ
ygor perez
ygor perez2y ago
Do you know if I would have to use the useQueryClient through RQ in all my procedures for the caching to work? Different queryClients different caches?
Nick
Nick2y ago
There should only be one in your whole application, if you have two you should remove one 🙂
ygor perez
ygor perez2y ago
but trpc already creates one right? I just can't access it
Nick
Nick2y ago
UseQueryClient would get it from the provider Not create one
ygor perez
ygor perez2y ago
oh! for some reason I mixed useQueryClient with useQuery, thank you very much that was exactly what I needed, I read the bit of documentation in https://trpc.io/docs/migrate-from-v9-to-v10 "queryClient is no longer exposed through tRPC context", but for some reason flew over my head.
Migrate from v9 to v10 | tRPC
Welcome to tRPC v10! We're excited to bring you a new major version to continue the journey towards perfect end-to-end type safety with excellent DX.
benjamin
benjamin17mo ago
Hi @ygor perez , did you resolve this? I have the persist working with RN, but still trying to figure out the Next side.
ygor perez
ygor perez17mo ago
I created this hook, I call it in the app.tsx file
benjamin
benjamin17mo ago
Thank you
gwilliamnn
gwilliamnn17mo ago
Hey @ygor perez , this hook replace the client used by the trpc?