T
tRPC

❓-help

how to persist the query client?

Yygorperez5/9/2023
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?
Nnlucas5/10/2023
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 🙂
Yygorperez5/10/2023
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
Nnlucas5/10/2023
I’m not much of a next user so haven’t played with the HOC we provide. Probably useQueryClient though from RQ
Yygorperez5/10/2023
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?
Nnlucas5/10/2023
There should only be one in your whole application, if you have two you should remove one 🙂
Yygorperez5/10/2023
but trpc already creates one right? I just can't access it
Nnlucas5/10/2023
UseQueryClient would get it from the provider Not create one
Yygorperez5/10/2023
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.
Bbenjamin5/23/2023
Hi @ygor perez , did you resolve this? I have the persist working with RN, but still trying to figure out the Next side.
Bbenjamin5/23/2023
Thank you
Ggwilliamnn6/2/2023
Hey @ygor perez , this hook replace the client used by the trpc?

Looking for more? Join the community!

Recommended 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. Having trouble to import my AppRouter in my react clientEnvironment: Node v18.15.0 I created my TRPC router in my express app and exported it how -documeArgument of Type not assignableSeeing the following error while trying to establish a connection with the trpc server from the clieCan't I create multiple TRPC React using same Router?Im using monorepo and have 2 client projects on that. I have 2 files that does the same, create the what is architectural style of nextjs + prisma + trpc app?like REST.... or SOA?Types with enabled: falseHow do types work with enabled: false? Do I need to cast my arguments in the cases where enabled is Error: No QueryClient set, use QueryClientProvider to set oneHello! I have wrapped my _app.tsx properly and I have made useQuery functionality possible, howeverYou're trying to use @trpc/server in a non-server environmentEnvironment: Node v18.15.0, yarn, Next 13.2.4 What's wrong: When using `createServerSideHelpers`, iTRPC Middleware w/ InputHello! I was wondering if there is a way to add input fields onto a TRPC middleware. Essentially I Server side headers are not appliedHi guys I have the following trpc client initialized ``` import { createTRPCProxyClient, httpBatchLiGet tRPC procedure latency?Hi all, is there a supported mechanism to run common code to all procedures, say if I want to get la