feat: use trpc 11

.changeset/thirty-onions-tickle.md

@@ -0,0 +1,5 @@
+---
+"create-t3-app": patch
+---
+
+feat: use trpc 11

cli/package.json

@@ -62,23 +62,23 @@
     "sort-package-json": "^2.4.1"
   },
   "devDependencies": {
-    "@auth/drizzle-adapter": "^0.3.6",
-    "@next-auth/prisma-adapter": "^1.0.7",
-    "@planetscale/database": "^1.11.0",
+    "@auth/drizzle-adapter": "^0.3.16",
+    "@auth/prisma-adapter": "^1.0.16",
+    "@planetscale/database": "^1.14.0",
     "@prisma/adapter-planetscale": "^5.6.0",
     "@prisma/client": "^5.6.0",
     "@t3-oss/env-nextjs": "^0.7.1",
-    "@tanstack/react-query": "^4.36.1",
-    "@trpc/client": "^10.43.6",
-    "@trpc/next": "^10.43.6",
-    "@trpc/react-query": "^10.43.6",
-    "@trpc/server": "^10.43.6",
+    "@tanstack/react-query": "^5.17.19",
+    "@trpc/client": "next",
+    "@trpc/next": "next",
+    "@trpc/react-query": "next",
+    "@trpc/server": "next",
     "@types/fs-extra": "^11.0.1",
     "@types/gradient-string": "^1.1.2",
     "@types/node": "^18.17.0",
-    "drizzle-kit": "^0.20.9",
+    "drizzle-kit": "^0.20.13",
     "drizzle-orm": "^0.29.3",
-    "next": "^14.0.3",
+    "next": "^14.1.0",
     "next-auth": "^4.24.5",
     "prettier": "^3.1.0",
     "prettier-plugin-tailwindcss": "^0.5.7",

cli/src/installers/dependencyVersionMap.ts

@@ -5,8 +5,8 @@
 export const dependencyVersionMap = {
   // NextAuth.js
   "next-auth": "^4.24.5",
-  "@next-auth/prisma-adapter": "^1.0.7",
-  "@auth/drizzle-adapter": "^0.3.6",
+  "@auth/prisma-adapter": "^1.0.16",
+  "@auth/drizzle-adapter": "^0.3.16",
 
   // Prisma
   prisma: "^5.6.0",
@@ -15,26 +15,26 @@ export const dependencyVersionMap = {
 
   // Drizzle
   "drizzle-orm": "^0.29.3",
-  "drizzle-kit": "^0.20.9",
+  "drizzle-kit": "^0.20.13",
   mysql2: "^3.6.1",
-  "@planetscale/database": "^1.11.0",
+  "@planetscale/database": "^1.14.0",
   postgres: "^3.4.3",
   "@types/better-sqlite3": "^7.6.6",
   "better-sqlite3": "^9.0.0",
 
   // TailwindCSS
-  tailwindcss: "^3.3.5",
+  tailwindcss: "^3.4.1",
   autoprefixer: "^10.4.14",
   postcss: "^8.4.31",
   prettier: "^3.1.0",
-  "prettier-plugin-tailwindcss": "^0.5.7",
+  "prettier-plugin-tailwindcss": "^0.5.11",
 
   // tRPC
-  "@trpc/client": "^10.43.6",
-  "@trpc/server": "^10.43.6",
-  "@trpc/react-query": "^10.43.6",
-  "@trpc/next": "^10.43.6",
-  "@tanstack/react-query": "^4.36.1",
+  "@trpc/client": "next",
+  "@trpc/server": "next",
+  "@trpc/react-query": "next",
+  "@trpc/next": "next",
+  "@tanstack/react-query": "^5.17.19",
   superjson: "^2.2.1",
   "server-only": "^0.0.1",
 } as const;

cli/src/installers/nextAuth.ts

@@ -15,7 +15,7 @@ export const nextAuthInstaller: Installer = ({
   const usingDrizzle = packages?.drizzle.inUse;
 
   const deps: AvailableDependencies[] = ["next-auth"];
-  if (usingPrisma) deps.push("@next-auth/prisma-adapter");
+  if (usingPrisma) deps.push("@auth/prisma-adapter");
   if (usingDrizzle) deps.push("@auth/drizzle-adapter");
 
   addPackageDependency({

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,

cli/template/base/package.json

@@ -11,20 +11,20 @@
   },
   "dependencies": {
     "@t3-oss/env-nextjs": "^0.7.1",
-    "next": "^14.0.4",
+    "next": "^14.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {
     "@types/eslint": "^8.44.7",
-    "@types/node": "^18.17.0",
+    "@types/node": "^20.11.5",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
     "@typescript-eslint/eslint-plugin": "^6.11.0",
     "@typescript-eslint/parser": "^6.11.0",
     "eslint": "^8.54.0",
-    "eslint-config-next": "^14.0.4",
-    "typescript": "^5.1.6"
+    "eslint-config-next": "^14.1.0",
+    "typescript": "^5.3.3"
   }
 }

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>
   );

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>
   );

cli/template/extras/src/app/page/with-auth-trpc-tw.tsx

@@ -7,7 +7,7 @@ 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 +68,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">

cli/template/extras/src/app/page/with-auth-trpc.tsx

@@ -8,7 +8,7 @@ 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 +69,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}>

cli/template/extras/src/app/page/with-trpc-tw.tsx

@@ -6,7 +6,7 @@ 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 +51,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">

cli/template/extras/src/app/page/with-trpc.tsx

@@ -7,7 +7,7 @@ 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 +52,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}>

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);

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)
  *

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)
  *

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)
  *

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)
  *

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)
  *

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)
  *

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)
  *

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)
  *

cli/template/extras/src/server/auth-app/with-prisma.ts

@@ -1,9 +1,10 @@
-import { PrismaAdapter } from "@next-auth/prisma-adapter";
+import { PrismaAdapter } from "@auth/prisma-adapter";
 import {
   getServerSession,
   type DefaultSession,
   type NextAuthOptions,
 } from "next-auth";
+import { type Adapter } from "next-auth/adapters";
 import DiscordProvider from "next-auth/providers/discord";
 
 import { env } from "~/env";
@@ -45,7 +46,7 @@ export const authOptions: NextAuthOptions = {
       },
     }),
   },
-  adapter: PrismaAdapter(db),
+  adapter: PrismaAdapter(db) as Adapter,
   providers: [
     DiscordProvider({
       clientId: env.DISCORD_CLIENT_ID,