chore: init

apps/web/trpc/react.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useState } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { httpBatchLink } from "@trpc/client";
+import { createTRPCReact } from "@trpc/react-query";
+
+import { AppRouter } from "@server/shared/trpc/trpc.instance";
+import { Session } from "next-auth";
+
+const createQueryClient = () =>
+  new QueryClient({
+    defaultOptions: {
+      queries: {
+        // With SSR, we usually want to set some default staleTime
+        // above 0 to avoid refetching immediately on the client
+        staleTime: 30 * 1000,
+      },
+    },
+  });
+
+let clientQueryClientSingleton: QueryClient | undefined = undefined;
+const getQueryClient = () => {
+  if (typeof window === "undefined") {
+    // Server: always make a new query client
+    return createQueryClient();
+  } else {
+    // Browser: use singleton pattern to keep the same query client
+    return (clientQueryClientSingleton ??= createQueryClient());
+  }
+};
+
+export const trpc = createTRPCReact<AppRouter>();
+
+export function TRPCReactProvider(props: {
+  children: React.ReactNode
+  session: Session | null
+}) {
+  const queryClient = getQueryClient();
+
+  const [trpcClient] = useState(() =>
+    trpc.createClient({
+      links: [
+        httpBatchLink({
+          url: process.env.NEXT_PUBLIC_APP_BASE_URL + `/api/trpc`,
+          headers() {
+            const token = props.session?.authToken;
+
+            return {
+              Authorization: token ? `Bearer ${token}` : undefined,
+            }
+          },
+        }),
+      ],
+    }),
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <trpc.Provider client={trpcClient} queryClient={queryClient}>
+        {props.children}
+      </trpc.Provider>
+    </QueryClientProvider>
+  );
+}
+