using react-query persistentQueryClient in nextjs

[zebapy]

Taking a quick look at https://github.com/trpc/trpc/blob/4932414d3282a1f26787b5f25e9cfef03127d2a5/packages/next/src/withTRPC.tsx
it's not clear to me how I might be able to use react-query's experimental persist features https://react-query.tanstack.com/plugins/persistQueryClient

is this supported by another means? I mainly want caching in localstorage for fast cold start in a PWA.

My other option seems like cache headers but I haven't figured out how to handle that when all requests are based on user session

[KATT]

You won't be able to use that with the withTRPC-HOC but you can create your own provider, see the docs here https://trpc.io/docs/react

[namdao2000]

Hi @KATT, is it possible to do this with withTRPC in 2023?
We are currently using a t3-app setup and would love to know how to integrate persistentQueryClient in our app.

Thank you so much 🙏🏻

[SimonHessel]

@namdao2000 I think the best option to still keep using the withTRPC hoc is to extract the functionality from the PersistQueryClientProvider to its custom hook like this. And simply calling inside the _app.tsx default component.

import { useQueryClient } from "@tanstack/react-query";
import {
  persistQueryClient,
  type PersistQueryClientOptions,
} from "@tanstack/react-query-persist-client";
import { useEffect, useRef } from "react";

/**
 * A custom hook that replicates the behvaior of PersistQueryClientProvider
 *
 * Ensures the correct subscription and unsubscription according to the React component lifecycle,
 * and also makes sure that queries do not begin fetching while still in the restoring phase.
 * Queries will render, but they will remain in the `fetchingState: 'idle'` until the data has
 * been restored. After restoration, the queries will refetch unless the restored data is
 * sufficiently fresh, and `initialData` will also be respected.
 *
 * This hook can be employed as an alternative to PersistQueryClientProvider inside an already existing QueryClientProvider.
 *
 * @param {PersistQueryClientOptions} persistOptions The options normally passed to PersistQueryClientProvider & onSuccess callback
 */
export const usePersistQueryClient = ({
  onSuccess,
  ...persistOptions
}: Omit<PersistQueryClientOptions, "queryClient"> & {
  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
  onSuccess?: () => Promise<unknown> | unknown;
}) => {
  const client = useQueryClient();
  const refs = useRef({ persistOptions, onSuccess });

  useEffect(() => {
    refs.current = { persistOptions, onSuccess };
  });

  useEffect(() => {
    let isStale = false;
    const [unsubscribe, promise] = persistQueryClient({
      ...refs.current.persistOptions,
      queryClient: client,
    });

    void promise.then(async () => {
      if (!isStale) {
        try {
          await refs.current.onSuccess?.();
        } finally {
        }
      }
    });

    return () => {
      isStale = true;
      unsubscribe();
    };
  }, [client]);
};

[jordiup]

Just as an FYI for anyone. If you're getting Date errors from the deserialized/cached result you will probably want to add in this line for superjson parsing 🚀

+++ b/web/utils/usePersistQueryClient.ts
import {
 	persistQueryClient,
 	type PersistQueryClientOptions,
 } from '@tanstack/react-query-persist-client';
+import superjson from 'superjson';
 
 /**
  * A custom hook that replicates the behvaior of PersistQueryClientProvider
export const usePersistQueryClient = ({
 			...refs.current.persistOptions,
 			persister: createSyncStoragePersister({
 				key: 'ls_Sharehouse',
+				serialize: (p) => superjson.stringify(p),
+				deserialize: (s) => superjson.parse(s),
 				storage:
 					typeof window !== 'undefined'
 						? window.localStorage