ygor perez•2y 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?

14 Replies

Nick•2y 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 perezOP•2y 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•2y ago

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

ygor perezOP•2y 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•2y ago

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

ygor perezOP•2y ago

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

Nick•2y ago

UseQueryClient would get it from the provider Not create one

ygor perezOP•2y 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•2y 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 perezOP•2y 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 perezOP•2y ago

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

benjamin•2y ago

Thank you

gwilliamnn•2y ago

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

Jordi•2mo ago

have come across this one on google, but just as an FYI for anyone, you'll want to add in superjson to ensure serialisation of dates doesn't break

import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
import { useQueryClient } from "@tanstack/react-query";
import {
  persistQueryClient,
  removeOldestQuery,
  type PersistedClient,
} from "@tanstack/react-query-persist-client";
import { useEffect } from "react";
import superjson from "superjson";

const usePersistQueryClient = () => {
  const queryClient = useQueryClient();
  useEffect(() => {
    const localStoragePersister = createSyncStoragePersister({
      storage: window.localStorage,
      throttleTime: 1000,
      retry: removeOldestQuery,
      serialize: (data) => superjson.serialize(data) ?? "",
      deserialize: (data) => superjson.deserialize(data) ?? {},
    });

    persistQueryClient({
      queryClient,
      persister: localStoragePersister,
      maxAge: 60 * 60 * 24,
    });
  }, []);
};

export default usePersistQueryClient;

import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
import { useQueryClient } from "@tanstack/react-query";
import {
  persistQueryClient,
  removeOldestQuery,
  type PersistedClient,
} from "@tanstack/react-query-persist-client";
import { useEffect } from "react";
import superjson from "superjson";

const usePersistQueryClient = () => {
  const queryClient = useQueryClient();
  useEffect(() => {
    const localStoragePersister = createSyncStoragePersister({
      storage: window.localStorage,
      throttleTime: 1000,
      retry: removeOldestQuery,
      serialize: (data) => superjson.serialize(data) ?? "",
      deserialize: (data) => superjson.deserialize(data) ?? {},
    });

    persistQueryClient({
      queryClient,
      persister: localStoragePersister,
      maxAge: 60 * 60 * 24,
    });
  }, []);
};

export default usePersistQueryClient;