update-trpc

apps/expo/package.json

@@ -18,9 +18,9 @@
     "@expo/metro-config": "^0.10.7",
     "@shopify/flash-list": "1.4.3",
     "@tanstack/react-query": "^5.8.7",
-    "@trpc/client": "next",
-    "@trpc/react-query": "next",
-    "@trpc/server": "next",
+    "@trpc/client": "12-28-caller-accept-fn",
+    "@trpc/react-query": "12-28-caller-accept-fn",
+    "@trpc/server": "12-28-caller-accept-fn",
     "expo": "^49.0.21",
     "expo-constants": "~14.4.2",
     "expo-linking": "~5.0.2",

apps/nextjs/package.json

@@ -23,10 +23,10 @@
     "@tanstack/react-query": "^5.8.7",
     "@tanstack/react-query-devtools": "^5.8.7",
     "@tanstack/react-query-next-experimental": "5.8.7",
-    "@trpc/client": "next",
-    "@trpc/next": "next",
-    "@trpc/react-query": "next",
-    "@trpc/server": "next",
+    "@trpc/client": "12-28-caller-accept-fn",
+    "@trpc/next": "12-28-caller-accept-fn",
+    "@trpc/react-query": "12-28-caller-accept-fn",
+    "@trpc/server": "12-28-caller-accept-fn",
     "geist": "^1.2.0",
     "next": "^14.0.4",
     "react": "18.2.0",

apps/nextjs/src/app/page.tsx

@@ -14,7 +14,7 @@ export default async function HomePage() {
   // You don't need to fetch these here, just showing different usages
   // If you don't want the Suspense loading state, you could pass these
   // posts as props as use as initialData in the query.
-  const posts = await api.post.all.query();
+  const posts = await api.post.all();
   console.log("RSC Posts:", posts);
 
   return (

apps/nextjs/src/trpc/react.tsx

@@ -28,9 +28,9 @@ export function TRPCReactProvider(props: {
         unstable_httpBatchStreamLink({
           url: getBaseUrl() + "/api/trpc",
           async headers() {
-            const headers = new Map(await props.headersPromise);
-            headers.set("x-trpc-source", "nextjs-react");
-            return Object.fromEntries(headers);
+            const heads = new Headers(await props.headersPromise);
+            heads.set("x-trpc-source", "nextjs-react");
+            return Object.fromEntries(heads);
           },
         }),
       ],

apps/nextjs/src/trpc/server.ts

@@ -1,12 +1,7 @@
-import type { TRPCErrorResponse } from "@trpc/server/rpc";
 import { cache } from "react";
 import { headers } from "next/headers";
-import { createTRPCClient, loggerLink, TRPCClientError } from "@trpc/client";
-import { callProcedure } from "@trpc/server";
-import { observable } from "@trpc/server/observable";
-import SuperJSON from "superjson";
 
-import { appRouter, createTRPCContext } from "@acme/api";
+import { createCaller, createTRPCContext } from "@acme/api";
 import { auth } from "@acme/auth";
 
 /**
@@ -23,39 +18,4 @@ const createContext = cache(async () => {
   });
 });
 
-export const api = createTRPCClient<typeof appRouter>({
-  transformer: SuperJSON,
-  links: [
-    loggerLink({
-      enabled: (op) =>
-        process.env.NODE_ENV === "development" ||
-        (op.direction === "down" && op.result instanceof Error),
-    }),
-    /**
-     * Custom RSC link that invokes procedures directly in the server component Don't be too afraid
-     * about the complexity here, it's just wrapping `callProcedure` with an observable to make it a
-     * valid ending link for tRPC.
-     */
-    () =>
-      ({ op }) =>
-        observable((observer) => {
-          createContext()
-            .then((ctx) => {
-              return callProcedure({
-                procedures: appRouter._def.procedures,
-                path: op.path,
-                getRawInput: () => Promise.resolve(op.input),
-                ctx,
-                type: op.type,
-              });
-            })
-            .then((data) => {
-              observer.next({ result: { data } });
-              observer.complete();
-            })
-            .catch((cause: TRPCErrorResponse) => {
-              observer.error(TRPCClientError.from(cause));
-            });
-        }),
-  ],
-});
+export const api = createCaller(createContext);

packages/api/package.json

@@ -17,8 +17,8 @@
     "@acme/auth": "workspace:^0.1.0",
     "@acme/db": "workspace:^0.1.0",
     "@acme/validators": "workspace:^0.1.0",
-    "@trpc/client": "next",
-    "@trpc/server": "next",
+    "@trpc/client": "12-28-caller-accept-fn",
+    "@trpc/server": "12-28-caller-accept-fn",
     "superjson": "2.2.1",
     "zod": "^3.22.4"
   },

packages/api/src/index.ts

@@ -1,18 +1,33 @@
 import type { inferRouterInputs, inferRouterOutputs } from "@trpc/server";
 
 import type { AppRouter } from "./root";
+import { appRouter } from "./root";
+import { createCallerFactory, createTRPCContext } from "./trpc";
 
-export { appRouter, type AppRouter } from "./root";
-export { createTRPCContext } from "./trpc";
+/**
+ * Create a server-side caller for the tRPC API
+ * @example
+ * const trpc = createCaller(createContext);
+ * const res = await trpc.post.all();
+ *       ^? Post[]
+ */
+const createCaller = createCallerFactory(appRouter);
 
 /**
  * Inference helpers for input types
- * @example type HelloInput = RouterInputs['example']['hello']
+ * @example
+ * type PostByIdInput = RouterInputs['post']['byId']
+ *      ^? { id: number }
  **/
-export type RouterInputs = inferRouterInputs<AppRouter>;
+type RouterInputs = inferRouterInputs<AppRouter>;
 
 /**
  * Inference helpers for output types
- * @example type HelloOutput = RouterOutputs['example']['hello']
+ * @example
+ * type AllPostsOutput = RouterOutputs['post']['all']
+ *      ^? Post[]
  **/
-export type RouterOutputs = inferRouterOutputs<AppRouter>;
+type RouterOutputs = inferRouterOutputs<AppRouter>;
+
+export { createTRPCContext, appRouter, createCaller };
+export type { AppRouter, RouterInputs, RouterOutputs };

packages/api/src/trpc.ts

@@ -58,6 +58,12 @@ const t = initTRPC.context<typeof createTRPCContext>().create({
   }),
 });
 
+/**
+ * Create a server-side caller
+ * @see https://trpc.io/docs/server/server-side-calls
+ */
+export const createCallerFactory = t.createCallerFactory;
+
 /**
  * 3. ROUTER & PROCEDURE (THE IMPORTANT BIT)
  *