Initial commit, most things work

src/trpc/query-client.ts

@@ -0,0 +1,25 @@
+import {
+	QueryClient,
+	defaultShouldDehydrateQuery,
+} from "@tanstack/react-query";
+import SuperJSON from "superjson";
+
+export 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,
+			},
+			dehydrate: {
+				serializeData: SuperJSON.serialize,
+				shouldDehydrateQuery: (query) =>
+					defaultShouldDehydrateQuery(query) ||
+					query.state.status === "pending",
+			},
+			hydrate: {
+				deserializeData: SuperJSON.deserialize,
+			},
+		},
+	});

src/trpc/react.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { type QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { httpBatchStreamLink, loggerLink } from "@trpc/client";
+import { createTRPCReact } from "@trpc/react-query";
+import type { inferRouterInputs, inferRouterOutputs } from "@trpc/server";
+import { useState } from "react";
+import SuperJSON from "superjson";
+
+import type { AppRouter } from "@/server/api/root";
+import { createQueryClient } from "./query-client";
+
+let clientQueryClientSingleton: QueryClient | undefined = undefined;
+const getQueryClient = () => {
+	if (typeof window === "undefined") {
+		// Server: always make a new query client
+		return createQueryClient();
+	}
+	// Browser: use singleton pattern to keep the same query client
+	clientQueryClientSingleton ??= createQueryClient();
+
+	return clientQueryClientSingleton;
+};
+
+export const api = createTRPCReact<AppRouter>();
+
+/**
+ * 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>;
+
+export function TRPCReactProvider(props: { children: React.ReactNode }) {
+	const queryClient = getQueryClient();
+
+	const [trpcClient] = useState(() =>
+		api.createClient({
+			links: [
+				loggerLink({
+					enabled: (op) =>
+						process.env.NODE_ENV === "development" ||
+						(op.direction === "down" && op.result instanceof Error),
+				}),
+				httpBatchStreamLink({
+					transformer: SuperJSON,
+					url: `${getBaseUrl()}/api/trpc`,
+					headers: () => {
+						const headers = new Headers();
+						headers.set("x-trpc-source", "nextjs-react");
+						return headers;
+					},
+				}),
+			],
+		}),
+	);
+
+	return (
+		<QueryClientProvider client={queryClient}>
+			<api.Provider client={trpcClient} queryClient={queryClient}>
+				{props.children}
+			</api.Provider>
+		</QueryClientProvider>
+	);
+}
+
+function getBaseUrl() {
+	if (typeof window !== "undefined") return window.location.origin;
+	if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
+	return `http://localhost:${process.env.PORT ?? 3000}`;
+}

src/trpc/server.ts

@@ -0,0 +1,30 @@
+import "server-only";
+
+import { createHydrationHelpers } from "@trpc/react-query/rsc";
+import { headers } from "next/headers";
+import { cache } from "react";
+
+import { type AppRouter, createCaller } from "@/server/api/root";
+import { createTRPCContext } from "@/server/api/trpc";
+import { createQueryClient } from "./query-client";
+
+/**
+ * This wraps the `createTRPCContext` helper and provides the required context for the tRPC API when
+ * handling a tRPC call from a React Server Component.
+ */
+const createContext = cache(async () => {
+	const heads = new Headers(await headers());
+	heads.set("x-trpc-source", "rsc");
+
+	return createTRPCContext({
+		headers: heads,
+	});
+});
+
+const getQueryClient = cache(createQueryClient);
+const caller = createCaller(createContext);
+
+export const { trpc: api, HydrateClient } = createHydrationHelpers<AppRouter>(
+	caller,
+	getQueryClient,
+);