ygor perez
ygor perez13mo 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
Nick13mo 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 perez13mo 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
Nick13mo 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 perez13mo 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
Nick13mo ago
There should only be one in your whole application, if you have two you should remove one 🙂
ygor perez
ygor perez13mo ago
but trpc already creates one right? I just can't access it
Nick
Nick13mo ago
UseQueryClient would get it from the provider Not create one
ygor perez
ygor perez13mo 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
benjamin13mo 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 perez13mo ago
I created this hook, I call it in the app.tsx file
benjamin
benjamin13mo ago
Thank you
gwilliamnn
gwilliamnn12mo ago
Hey @ygor perez , this hook replace the client used by the trpc?
More Posts
How to infer type of a nested object from app router output?I have a tRPC router than returns a nested object through a db query. It looks like this: ```ts ILeWhat's the type of errorFormatter parameterI wanna know how could i get the type of the errorFormatter parameter, so i can move the errorFormattRPC works only for monoliths environment?How can I works if typesafe in real time with a remote server? 🤔How to use createCaller() with lambda for testing?Has anyone successfully mocked a trpc caller that uses the AWS Lambda integration? trying to write sis there a way to call useQuery() from a callback and get the return value within that callback?I have a generic component that is effectively an autocomplete that fills in options from a web requUsing Response with the Next App RouterThe route handlers in the App Router, only receive the Request object, requiring you to use a ResponThe only way to access useQuery options without input is passing undefined to it?Is there any other way? seems strange pass undefined to the input queryHow can I access the trpc context in zod's refine function?To do something like ```ts create: myProcedure .input(myInputSchema.refine(async ({ slug }, ctx)Set Request Headers for individual requests?Hello everyone, I have a simple question, can you somehow add headers to the individual requests insGet undefined when the refetch function has successfully workedIn my use case, I first disabled the useQuery function because I want it only fetch when I want to.