❓-help

how to persist the query client?

Yygorperez

5/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?

Nnlucas

5/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 🙂

Yygorperez

5/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

Nnlucas

5/10/2023

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

Yygorperez

5/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?

Nnlucas

5/10/2023

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

Yygorperez

5/10/2023

but trpc already creates one right? I just can't access it

Nnlucas

5/10/2023

UseQueryClient would get it from the provider Not create one

Yygorperez

5/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.

Bbenjamin

5/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.

Yygorperez

5/23/2023

https://github.com/YgorPerez/spotify-api-challenge/blob/main/src/hooks/usePersistQueryClient.ts I created this hook, I call it in the app.tsx file

Bbenjamin

5/23/2023

Thank you

Ggwilliamnn

6/2/2023

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