project forms

src/app/_trpc/TrpcProvider.tsx

@@ -1,5 +1,6 @@
 'use client'
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryStreamedHydration } from '@tanstack/react-query-next-experimental'
 import { httpBatchLink } from "@trpc/client";
 import React, { useState } from "react"
 import { trpc } from "./Client";
@@ -18,12 +19,26 @@ function getBaseUrl() {
   return `http://localhost:${process.env.PORT ?? 3000}`;
 }
 
-export default function TrpcProvider({children}:{children: React.ReactNode}) {
-  const [queryClient] = useState(() => new QueryClient({ defaultOptions: {
+let clientQueryClient: QueryClient | undefined = undefined;
+const makeQueryClient = () => new QueryClient({
+  defaultOptions: {
     queries: {
       experimental_prefetchInRender: true
     }
-  }}));
+  }
+});
+function getQueryClient() {
+  if (typeof window === "undefined") {
+    // Server: always make a new query client
+    return makeQueryClient();
+  } else {
+    // Browser: make a new query client if we don't already have one
+    if (!clientQueryClient) clientQueryClient = makeQueryClient();
+    return clientQueryClient;
+  }
+}
+export default function TrpcProvider({ children }: { children: React.ReactNode }) {
+  const queryClient = getQueryClient();
   const [trpcClient] = useState(() => {
     return trpc.createClient({
       links: [
@@ -33,10 +48,14 @@ export default function TrpcProvider({children}:{children: React.ReactNode}) {
       ],
     })
   });
-  
+
   return (
     <trpc.Provider client={trpcClient} queryClient={queryClient}>
-      <QueryClientProvider client={queryClient}> {children} </QueryClientProvider>
+      <QueryClientProvider client={queryClient}>
+        <ReactQueryStreamedHydration>
+          {children}
+        </ReactQueryStreamedHydration>
+      </QueryClientProvider>
     </trpc.Provider>
   )
 }