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?

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 🙂

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,
})

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

I’m not much of a next user so haven’t played with the HOC we provide. Probably useQueryClient though from RQ

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?

There should only be one in your whole application, if you have two you should remove one 🙂

but trpc already creates one right?

I just can't access it

UseQueryClient would get it from the provider

Not create one

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.

Hi @ygor perez , did you resolve this? I have the persist working with RN, but still trying to figure out the Next side.

I created this hook, I call it in the app.tsx file

Thank you

Hey @ygor perez , this hook replace the client used by the trpc?