fix: use localLink to invoke procedures directly during SSR (#1480)

Author: juliusmarminge

apps/tanstack-start/package.json

@@ -22,15 +22,15 @@
     "@t3-oss/env-core": "^0.13.8",
     "@tanstack/react-form": "catalog:",
     "@tanstack/react-query": "catalog:",
-    "@tanstack/react-router": "^1.133.28",
-    "@tanstack/react-router-devtools": "^1.133.28",
-    "@tanstack/react-router-ssr-query": "^1.133.28",
-    "@tanstack/react-start": "^1.133.29",
+    "@tanstack/react-router": "^1.135.2",
+    "@tanstack/react-router-devtools": "^1.135.2",
+    "@tanstack/react-router-ssr-query": "^1.135.2",
+    "@tanstack/react-start": "^1.135.2",
     "@trpc/client": "catalog:",
     "@trpc/server": "catalog:",
     "@trpc/tanstack-react-query": "catalog:",
     "better-auth": "catalog:",
-    "nitro": "npm:nitro-nightly@latest",
+    "nitro": "3.0.1-alpha.1",
     "react": "catalog:react19",
     "react-dom": "catalog:react19",
     "superjson": "2.2.3",

apps/tanstack-start/src/lib/trpc.ts

@@ -1,33 +1,55 @@
+import { createIsomorphicFn } from "@tanstack/react-start";
+import { getRequestHeaders } from "@tanstack/react-start/server";
 import {
   createTRPCClient,
   httpBatchStreamLink,
   loggerLink,
+  unstable_localLink,
 } from "@trpc/client";
 import { createTRPCContext } from "@trpc/tanstack-react-query";
 import SuperJSON from "superjson";
 
-import type { AppRouter } from "@acme/api";
+import * as Api from "@acme/api";
 
+import { auth } from "~/auth/server";
 import { env } from "~/env";
 import { getBaseUrl } from "~/lib/url";
 
-export const trpcClient = createTRPCClient<AppRouter>({
-  links: [
-    loggerLink({
-      enabled: (op) =>
-        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;
-      },
-    }),
-  ],
-});
+export const makeTRPCClient = createIsomorphicFn()
+  .server(() => {
+    return createTRPCClient<Api.AppRouter>({
+      links: [
+        unstable_localLink({
+          router: Api.appRouter,
+          transformer: SuperJSON,
+          createContext: () => {
+            const headers = new Headers(getRequestHeaders());
+            headers.set("x-trpc-source", "tanstack-start-server");
+            return Api.createTRPCContext({ auth, headers });
+          },
+        }),
+      ],
+    });
+  })
+  .client(() => {
+    return createTRPCClient<Api.AppRouter>({
+      links: [
+        loggerLink({
+          enabled: (op) =>
+            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", "tanstack-start-client");
+            return headers;
+          },
+        }),
+      ],
+    });
+  });
 
-export const { useTRPC, TRPCProvider } = createTRPCContext<AppRouter>();
+export const { useTRPC, TRPCProvider } = createTRPCContext<Api.AppRouter>();

apps/tanstack-start/src/router.tsx

@@ -4,7 +4,7 @@ import { setupRouterSsrQueryIntegration } from "@tanstack/react-router-ssr-query
 import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query";
 import SuperJSON from "superjson";
 
-import { trpcClient, TRPCProvider } from "~/lib/trpc";
+import { makeTRPCClient, TRPCProvider } from "~/lib/trpc";
 import { routeTree } from "./routeTree.gen";
 
 export function getRouter() {
@@ -14,6 +14,7 @@ export function getRouter() {
       hydrate: { deserializeData: SuperJSON.deserialize },
     },
   });
+  const trpcClient = makeTRPCClient();
   const trpc = createTRPCOptionsProxy({
     client: trpcClient,
     queryClient,
@@ -38,9 +39,3 @@ export function getRouter() {
 
   return router;
 }
-
-declare module "@tanstack/react-router" {
-  interface Register {
-    router: ReturnType<typeof getRouter>;
-  }
-}