add data persistence

package.json

@@ -48,7 +48,9 @@
     "@sendgrid/mail": "^8.1.5",
     "@t3-oss/env-nextjs": "^0.13.8",
     "@tabler/icons-react": "^3.34.1",
+    "@tanstack/query-async-storage-persister": "^5.85.5",
     "@tanstack/react-query": "^5.85.5",
+    "@tanstack/react-query-persist-client": "^5.85.5",
     "@tanstack/react-table": "^8.21.3",
     "@trpc/client": "11.5.0",
     "@trpc/next": "11.5.0",

src/lib/auth-client.ts

@@ -1,5 +1,4 @@
 import { createAuthClient } from "better-auth/react";
-import { env } from "~/env";
 
 export const authClient = createAuthClient({});
 

src/trpc/react.tsx

@@ -1,18 +1,37 @@
 "use client";
 
 import type { QueryClient } from "@tanstack/react-query";
-import { useState } from "react";
-import { QueryClientProvider } from "@tanstack/react-query";
 import {
   createTRPCClient,
   loggerLink,
   unstable_httpBatchStreamLink,
 } from "@trpc/client";
 import { createTRPCContext } from "@trpc/tanstack-react-query";
+import { useState } from "react";
 import SuperJSON from "superjson";
 
-import { createQueryClient } from "./query-client";
 import type { AppRouter } from "~/server/api/root";
+import { createQueryClient } from "./query-client";
+
+import { createAsyncStoragePersister } from "@tanstack/query-async-storage-persister";
+import {
+  type Persister,
+  PersistQueryClientProvider,
+} from "@tanstack/react-query-persist-client";
+
+const createSerialAsyncStoragePersister = () => {
+  return createAsyncStoragePersister({
+    storage: typeof window === "undefined" ? undefined : window.localStorage,
+  });
+};
+
+let asyncStoragePersister: Persister;
+export const getAsyncStoragePersister = () => {
+  if (typeof window === "undefined") {
+    return asyncStoragePersister;
+  }
+  return (asyncStoragePersister ??= createSerialAsyncStoragePersister());
+};
 
 let clientQueryClientSingleton: QueryClient | undefined = undefined;
 export const getQueryClient = () => {
@@ -25,7 +44,15 @@ export const getQueryClient = () => {
   }
 };
 
-export const { useTRPC, TRPCProvider } = createTRPCContext<AppRouter>();
+export const { useTRPC, useTRPCClient, TRPCProvider } =
+  createTRPCContext<AppRouter>();
+
+const getBaseUrl = () => {
+  if (typeof window !== "undefined") return window.location.origin;
+  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
+  // eslint-disable-next-line no-restricted-properties
+  return `http://localhost:${process.env.PORT ?? 3000}`;
+};
 
 export function TRPCReactProvider(props: { children: React.ReactNode }) {
   const queryClient = getQueryClient();
@@ -52,17 +79,13 @@ export function TRPCReactProvider(props: { children: React.ReactNode }) {
   );
 
   return (
-    <QueryClientProvider client={queryClient}>
+    <PersistQueryClientProvider
+      client={queryClient}
+      persistOptions={{ persister: getAsyncStoragePersister() }}
+    >
       <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
         {props.children}
       </TRPCProvider>
-    </QueryClientProvider>
+    </PersistQueryClientProvider>
   );
 }
-
-const getBaseUrl = () => {
-  if (typeof window !== "undefined") return window.location.origin;
-  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
-  // eslint-disable-next-line no-restricted-properties
-  return `http://localhost:${process.env.PORT ?? 3000}`;
-};