ygor perez•15mo 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•15mo 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•15mo 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•15mo 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•15mo 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•15mo ago

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

ygor perez•15mo ago

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

Nick•15mo ago

UseQueryClient would get it from the provider Not create one

ygor perez•15mo 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•15mo 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•15mo ago

https://github.com/YgorPerez/spotify-api-challenge/blob/main/src/hooks/usePersistQueryClient.ts

GitHub

spotify-api-challenge/usePersistQueryClient.ts at main · YgorPerez/...

A challenge from https://github.com/RodyRafa/challenge/tree/master/react - spotify-api-challenge/usePersistQueryClient.ts at main · YgorPerez/spotify-api-challenge

ygor perez•15mo ago

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

benjamin•15mo ago

Thank you

gwilliamnn•15mo ago

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