Let it rip

src/trpc/react.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { loggerLink, unstable_httpBatchStreamLink } from "@trpc/client";
+import { createTRPCReact } from "@trpc/react-query";
+import { useState } from "react";
+
+import { type AppRouter } from "~/server/api/root";
+import { getUrl, transformer } from "./shared";
+
+export const api = createTRPCReact<AppRouter>();
+
+export function TRPCReactProvider(props: {
+  children: React.ReactNode;
+  headers: Headers;
+}) {
+  const [queryClient] = useState(() => new QueryClient());
+
+  const [trpcClient] = useState(() =>
+    api.createClient({
+      transformer,
+      links: [
+        loggerLink({
+          enabled: (op) =>
+            process.env.NODE_ENV === "development" ||
+            (op.direction === "down" && op.result instanceof Error),
+        }),
+        unstable_httpBatchStreamLink({
+          url: getUrl(),
+          headers() {
+            const heads = new Map(props.headers);
+            heads.set("x-trpc-source", "react");
+            return Object.fromEntries(heads);
+          },
+        }),
+      ],
+    })
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <api.Provider client={trpcClient} queryClient={queryClient}>
+        {props.children}
+      </api.Provider>
+    </QueryClientProvider>
+  );
+}

src/trpc/server.ts

@@ -0,0 +1,28 @@
+import {
+  createTRPCProxyClient,
+  loggerLink,
+  unstable_httpBatchStreamLink,
+} from "@trpc/client";
+import { headers } from "next/headers";
+
+import { type AppRouter } from "~/server/api/root";
+import { getUrl, transformer } from "./shared";
+
+export const api = createTRPCProxyClient<AppRouter>({
+  transformer,
+  links: [
+    loggerLink({
+      enabled: (op) =>
+        process.env.NODE_ENV === "development" ||
+        (op.direction === "down" && op.result instanceof Error),
+    }),
+    unstable_httpBatchStreamLink({
+      url: getUrl(),
+      headers() {
+        const heads = new Map(headers());
+        heads.set("x-trpc-source", "rsc");
+        return Object.fromEntries(heads);
+      },
+    }),
+  ],
+});

src/trpc/shared.ts

@@ -0,0 +1,30 @@
+import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server";
+import superjson from "superjson";
+
+import { type AppRouter } from "~/server/api/root";
+
+export const transformer = superjson;
+
+function getBaseUrl() {
+  if (typeof window !== "undefined") return "";
+  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
+  return `http://localhost:${process.env.PORT ?? 3000}`;
+}
+
+export function getUrl() {
+  return getBaseUrl() + "/api/trpc";
+}
+
+/**
+ * Inference helper for inputs.
+ *
+ * @example type HelloInput = RouterInputs['example']['hello']
+ */
+export type RouterInputs = inferRouterInputs<AppRouter>;
+
+/**
+ * Inference helper for outputs.
+ *
+ * @example type HelloOutput = RouterOutputs['example']['hello']
+ */
+export type RouterOutputs = inferRouterOutputs<AppRouter>;