feat: use trpc 11 (t3-oss#1741)

devvianto605 · Mar 14, 2024 · 4f6fbb0 · 4f6fbb0
1 parent 388fcd8
commit 4f6fbb0
Show file tree

Hide file tree

Showing 24 changed files with 163 additions and 179 deletions.
diff --git a/.changeset/thirty-onions-tickle.md b/.changeset/thirty-onions-tickle.md
@@ -0,0 +1,5 @@
+---
+"create-t3-app": minor
+---
+
+feat: use trpc 11
diff --git a/cli/package.json b/cli/package.json
@@ -68,11 +68,11 @@
     "@prisma/adapter-planetscale": "^5.10.2",
     "@prisma/client": "^5.10.2",
     "@t3-oss/env-nextjs": "^0.9.2",
-    "@tanstack/react-query": "^4.36.1",
-    "@trpc/client": "^10.45.1",
-    "@trpc/next": "^10.45.1",
-    "@trpc/react-query": "^10.45.1",
-    "@trpc/server": "^10.45.1",
+    "@tanstack/react-query": "^5.25.0",
+    "@trpc/client": "next",
+    "@trpc/next": "next",
+    "@trpc/react-query": "next",
+    "@trpc/server": "next",
     "@types/better-sqlite3": "^7.6.9",
     "@types/fs-extra": "^11.0.4",
     "@types/gradient-string": "^1.1.5",

diff --git a/cli/src/installers/dependencyVersionMap.ts b/cli/src/installers/dependencyVersionMap.ts
@@ -31,11 +31,11 @@ export const dependencyVersionMap = {
   "prettier-plugin-tailwindcss": "^0.5.11",
 
   // tRPC
-  "@trpc/client": "^10.45.1",
-  "@trpc/server": "^10.45.1",
-  "@trpc/react-query": "^10.45.1",
-  "@trpc/next": "^10.45.1",
-  "@tanstack/react-query": "^4.36.1",
+  "@trpc/client": "next",
+  "@trpc/server": "next",
+  "@trpc/react-query": "next",
+  "@trpc/next": "next",
+  "@tanstack/react-query": "^5.25.0",
   superjson: "^2.2.1",
   "server-only": "^0.0.1",
 } as const;

diff --git a/cli/src/installers/trpc.ts b/cli/src/installers/trpc.ts
@@ -103,10 +103,6 @@ export const trpcInstaller: Installer = ({
         path.join(trpcDir, "react.tsx"),
         path.join(projectDir, "src/trpc/react.tsx"),
       ],
-      [
-        path.join(trpcDir, "shared.ts"),
-        path.join(projectDir, "src/trpc/shared.ts"),
-      ],
       [
         path.join(
           extrasDir,

diff --git a/cli/template/extras/src/app/_components/create-post-tw.tsx b/cli/template/extras/src/app/_components/create-post-tw.tsx
@@ -34,9 +34,9 @@ export function CreatePost() {
       <button
         type="submit"
         className="rounded-full bg-white/10 px-10 py-3 font-semibold transition hover:bg-white/20"
-        disabled={createPost.isLoading}
+        disabled={createPost.isPending}
       >
-        {createPost.isLoading ? "Submitting..." : "Submit"}
+        {createPost.isPending ? "Submitting..." : "Submit"}
       </button>
     </form>
   );

diff --git a/cli/template/extras/src/app/_components/create-post.tsx b/cli/template/extras/src/app/_components/create-post.tsx
@@ -35,9 +35,9 @@ export function CreatePost() {
       <button
         type="submit"
         className={styles.submitButton}
-        disabled={createPost.isLoading}
+        disabled={createPost.isPending}
       >
-        {createPost.isLoading ? "Submitting..." : "Submit"}
+        {createPost.isPending ? "Submitting..." : "Submit"}
       </button>
     </form>
   );

diff --git a/cli/template/extras/src/app/page/with-auth-trpc-tw.tsx b/cli/template/extras/src/app/page/with-auth-trpc-tw.tsx
@@ -1,13 +1,11 @@
-import { unstable_noStore as noStore } from "next/cache";
 import Link from "next/link";
 
 import { CreatePost } from "~/app/_components/create-post";
 import { getServerAuthSession } from "~/server/auth";
 import { api } from "~/trpc/server";
 
 export default async function Home() {
-  noStore();
-  const hello = await api.post.hello.query({ text: "from tRPC" });
+  const hello = await api.post.hello({ text: "from tRPC" });
   const session = await getServerAuthSession();
 
   return (
@@ -68,7 +66,7 @@ async function CrudShowcase() {
   const session = await getServerAuthSession();
   if (!session?.user) return null;
 
-  const latestPost = await api.post.getLatest.query();
+  const latestPost = await api.post.getLatest();
 
   return (
     <div className="w-full max-w-xs">

diff --git a/cli/template/extras/src/app/page/with-auth-trpc.tsx b/cli/template/extras/src/app/page/with-auth-trpc.tsx
@@ -1,4 +1,3 @@
-import { unstable_noStore as noStore } from "next/cache";
 import Link from "next/link";
 
 import { CreatePost } from "~/app/_components/create-post";
@@ -7,8 +6,7 @@ import { api } from "~/trpc/server";
 import styles from "./index.module.css";
 
 export default async function Home() {
-  noStore();
-  const hello = await api.post.hello.query({ text: "from tRPC" });
+  const hello = await api.post.hello({ text: "from tRPC" });
   const session = await getServerAuthSession();
 
   return (
@@ -69,7 +67,7 @@ async function CrudShowcase() {
   const session = await getServerAuthSession();
   if (!session?.user) return null;
 
-  const latestPost = await api.post.getLatest.query();
+  const latestPost = await api.post.getLatest();
 
   return (
     <div className={styles.showcaseContainer}>

diff --git a/cli/template/extras/src/app/page/with-trpc-tw.tsx b/cli/template/extras/src/app/page/with-trpc-tw.tsx
@@ -1,12 +1,10 @@
-import { unstable_noStore as noStore } from "next/cache";
 import Link from "next/link";
 
 import { CreatePost } from "~/app/_components/create-post";
 import { api } from "~/trpc/server";
 
 export default async function Home() {
-  noStore();
-  const hello = await api.post.hello.query({ text: "from tRPC" });
+  const hello = await api.post.hello({ text: "from tRPC" });
 
   return (
     <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white">
@@ -51,7 +49,7 @@ export default async function Home() {
 }
 
 async function CrudShowcase() {
-  const latestPost = await api.post.getLatest.query();
+  const latestPost = await api.post.getLatest();
 
   return (
     <div className="w-full max-w-xs">

diff --git a/cli/template/extras/src/app/page/with-trpc.tsx b/cli/template/extras/src/app/page/with-trpc.tsx
@@ -1,13 +1,11 @@
-import { unstable_noStore as noStore } from "next/cache";
 import Link from "next/link";
 
 import { CreatePost } from "~/app/_components/create-post";
 import { api } from "~/trpc/server";
 import styles from "./index.module.css";
 
 export default async function Home() {
-  noStore();
-  const hello = await api.post.hello.query({ text: "from tRPC" });
+  const hello = await api.post.hello({ text: "from tRPC" });
 
   return (
     <main className={styles.main}>
@@ -52,7 +50,7 @@ export default async function Home() {
 }
 
 async function CrudShowcase() {
-  const latestPost = await api.post.getLatest.query();
+  const latestPost = await api.post.getLatest();
 
   return (
     <div className={styles.showcaseContainer}>

diff --git a/cli/template/extras/src/server/api/root.ts b/cli/template/extras/src/server/api/root.ts
@@ -1,5 +1,5 @@
 import { postRouter } from "~/server/api/routers/post";
-import { createTRPCRouter } from "~/server/api/trpc";
+import { createCallerFactory, createTRPCRouter } from "~/server/api/trpc";
 
 /**
  * This is the primary router for your server.
@@ -12,3 +12,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);
diff --git a/cli/template/extras/src/server/api/trpc-app/base.ts b/cli/template/extras/src/server/api/trpc-app/base.ts
@@ -49,6 +49,13 @@ 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)
  *

diff --git a/cli/template/extras/src/server/api/trpc-app/with-auth-db.ts b/cli/template/extras/src/server/api/trpc-app/with-auth-db.ts
@@ -57,6 +57,13 @@ 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)
  *

diff --git a/cli/template/extras/src/server/api/trpc-app/with-auth.ts b/cli/template/extras/src/server/api/trpc-app/with-auth.ts
@@ -54,6 +54,13 @@ 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)
  *

diff --git a/cli/template/extras/src/server/api/trpc-app/with-db.ts b/cli/template/extras/src/server/api/trpc-app/with-db.ts
@@ -52,6 +52,13 @@ 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)
  *

diff --git a/cli/template/extras/src/server/api/trpc-pages/base.ts b/cli/template/extras/src/server/api/trpc-pages/base.ts
@@ -68,6 +68,13 @@ 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)
  *

diff --git a/cli/template/extras/src/server/api/trpc-pages/with-auth-db.ts b/cli/template/extras/src/server/api/trpc-pages/with-auth-db.ts
@@ -84,6 +84,13 @@ 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)
  *

diff --git a/cli/template/extras/src/server/api/trpc-pages/with-auth.ts b/cli/template/extras/src/server/api/trpc-pages/with-auth.ts
@@ -82,6 +82,13 @@ 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)
  *

diff --git a/cli/template/extras/src/server/api/trpc-pages/with-db.ts b/cli/template/extras/src/server/api/trpc-pages/with-db.ts
@@ -71,6 +71,13 @@ 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)
  *

diff --git a/cli/template/extras/src/trpc/react.tsx b/cli/template/extras/src/trpc/react.tsx
@@ -4,9 +4,9 @@ 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 SuperJSON from "superjson";
 
 import { type AppRouter } from "~/server/api/root";
-import { getUrl, transformer } from "./shared";
 
 const createQueryClient = () => new QueryClient();
 
@@ -27,15 +27,20 @@ export function TRPCReactProvider(props: { children: React.ReactNode }) {
 
   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(),
+          transformer: SuperJSON,
+          url: getBaseUrl() + "/api/trpc",
+          headers: () => {
+            const headers = new Headers();
+            headers.set("x-trpc-source", "nextjs-react");
+            return headers;
+          },
         }),
       ],
     })
@@ -49,3 +54,9 @@ export function TRPCReactProvider(props: { children: React.ReactNode }) {
     </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}`;
+}