feat: use trpc 11 (#1741)

t3-oss · Mar 14, 2024 · 5de586d · 5de586d
1 parent 7579a52
commit 5de586d
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:https://localhost:${process.env.PORT ?? 3000}`;
+}