chore(deps): 🔗 trpc v11

apps/web/package.json

@@ -23,12 +23,12 @@
     "@next/bundle-analyzer": "^14.1.3",
     "@sentry/nextjs": "^7.107.0",
     "@t3-oss/env-nextjs": "^0.9.2",
-    "@tanstack/react-query": "^4.36.1",
-    "@tanstack/react-query-devtools": "^4.36.1",
-    "@trpc/client": "^10.45.2",
-    "@trpc/next": "^10.45.2",
-    "@trpc/react-query": "^10.45.2",
-    "@trpc/server": "^10.45.2",
+    "@tanstack/react-query": "^5.28.4",
+    "@tanstack/react-query-devtools": "^5.28.4",
+    "@trpc/client": "next",
+    "@trpc/next": "next",
+    "@trpc/react-query": "next",
+    "@trpc/server": "next",
     "@vercel/analytics": "^1.2.2",
     "@vercel/otel": "^1.6.0",
     "ahooks": "^3.7.10",

apps/web/src/server/api/root.ts

@@ -1,5 +1,5 @@
 import { authRouter, mainRouter } from "~/server/api/routers";
-import { createTRPCRouter } from "~/server/api/trpc";
+import { createCallerFactory, createTRPCRouter } from "~/server/api/trpc";
 
 /**
  * This is the primary router for your server.
@@ -13,3 +13,12 @@ export const appRouter = createTRPCRouter({
 
 // export type definition of API
 export type AppRouter = typeof appRouter;
+
+/**
+ * Create a server-side caller for the tRPC API.
+ * @example
+ * const trpc = createCaller(createContext);
+ * const res = await trpc.post.all();
+ *       ^? Post[]
+ */
+export const createCaller = createCallerFactory(appRouter);

apps/web/src/server/api/trpc.ts

@@ -1,4 +1,5 @@
 /**
+ * ? https://github.com/t3-oss/create-t3-app/blob/main/cli/template/extras/src/server/api/trpc-app/with-auth-db.ts
  * YOU PROBABLY DON'T NEED TO EDIT THIS FILE, UNLESS:
  * 1. You want to modify request context (see Part 1).
  * 2. You want to create a new middleware or type of procedure (see Part 3).
@@ -60,6 +61,13 @@ const t = initTRPC
     },
   });
 
+/**
+ * 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)
  *

apps/web/src/server/openapi.ts

@@ -1,18 +1,15 @@
-import type { OpenApiRouter } from "trpc-openapi";
 import { generateOpenApiDocument } from "trpc-openapi";
 
 import { appRouter } from "~/server/api/root";
 
 // Generate OpenAPI schema document
-export const openApiDocument = generateOpenApiDocument(
-  appRouter as OpenApiRouter,
-  {
-    // ? https://docs.npmjs.com/cli/v10/using-npm/scripts#packagejson-vars
-    title: `${process.env.npm_package_name} API Docs`,
-    description: process.env.npm_package_description,
-    version: `${process.env.npm_package_version}`,
-    baseUrl: "http://localhost:3000/api",
-    docsUrl: "https://doss.gracefullight.dev/docs",
-    tags: ["banks"],
-  },
-);
+// ! https://github.com/jlalmes/trpc-openapi/pull/315
+export const openApiDocument = generateOpenApiDocument(appRouter, {
+  // ? https://docs.npmjs.com/cli/v10/using-npm/scripts#packagejson-vars
+  title: `${process.env.npm_package_name} API Docs`,
+  description: process.env.npm_package_description,
+  version: `${process.env.npm_package_version}`,
+  baseUrl: "http://localhost:3000/api",
+  docsUrl: "https://doss.gracefullight.dev/docs",
+  tags: ["banks"],
+});

apps/web/src/trpc/react.tsx

@@ -6,8 +6,8 @@ import { loggerLink, unstable_httpBatchStreamLink } from "@trpc/client";
 import { createTRPCReact } from "@trpc/react-query";
 import { useState } from "react";
 
+import superjson from "superjson";
 import type { AppRouter } from "~/server/api/root";
-import { getUrl, transformer } from "./shared";
 
 const createQueryClient = () => new QueryClient();
 
@@ -31,20 +31,19 @@ export function TRPCReactProvider(props: {
 
   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() {
-            return {
-              cookie: props.cookies,
-              "x-trpc-source": "react",
-            };
+          transformer: superjson,
+          url: getBaseUrl() + "/api/trpc",
+          headers: () => {
+            const headers = new Headers();
+            headers.set("x-trpc-source", "nextjs-react");
+            return headers;
           },
         }),
       ],
@@ -62,3 +61,9 @@ export function TRPCReactProvider(props: {
     </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}`;
+}

apps/web/src/trpc/server.ts

@@ -1,20 +1,10 @@
 import "server-only";
 
-import {
-  createTRPCProxyClient,
-  loggerLink,
-  TRPCClientError,
-} from "@trpc/client";
-import { callProcedure } from "@trpc/server";
-import { observable } from "@trpc/server/observable";
-import type { TRPCErrorResponse } from "@trpc/server/rpc";
 import { cookies } from "next/headers";
 import { cache } from "react";
 
-import type { AppRouter } from "~/server/api/root";
-import { appRouter } from "~/server/api/root";
+import { createCaller } from "~/server/api/root";
 import { createTRPCContext } from "~/server/api/trpc";
-import { transformer } from "./shared";
 
 /**
  * This wraps the `createTRPCContext` helper and provides the required context for the tRPC API when
@@ -29,38 +19,4 @@ const createContext = cache(() => {
   });
 });
 
-export const api = createTRPCProxyClient<AppRouter>({
-  transformer,
-  links: [
-    loggerLink({
-      enabled: (op) =>
-        process.env.NODE_ENV === "development" ||
-        (op.direction === "down" && op.result instanceof Error),
-    }),
-    /**
-     * Custom RSC link that lets us invoke procedures without using http requests. Since Server
-     * Components always run on the server, we can just call the procedure as a function.
-     */
-    () =>
-      ({ op }) =>
-        observable((observer) => {
-          createContext()
-            .then((ctx) => {
-              return callProcedure({
-                procedures: appRouter._def.procedures,
-                path: op.path,
-                rawInput: 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);

apps/web/src/utils/api.ts

@@ -20,13 +20,6 @@ const getBaseUrl = () => {
 export const api = createTRPCNext<AppRouter>({
   config() {
     return {
-      /**
-       * Transformer used for data de-serialization from the server.
-       *
-       * @see https://trpc.io/docs/data-transformers
-       */
-      transformer: superjson,
-
       /**
        * Links used to determine request flow from client to server.
        *
@@ -39,6 +32,12 @@ export const api = createTRPCNext<AppRouter>({
             (opts.direction === "down" && opts.result instanceof Error),
         }),
         httpBatchLink({
+          /**
+           * Transformer used for data de-serialization from the server.
+           *
+           * @see https://trpc.io/docs/data-transformers
+           */
+          transformer: superjson,
           url: `${getBaseUrl()}/api/trpc`,
         }),
       ],
@@ -50,6 +49,7 @@ export const api = createTRPCNext<AppRouter>({
    * @see https://trpc.io/docs/nextjs#ssr-boolean-default-false
    */
   ssr: false,
+  transformer: superjson,
 });
 
 /**