Skip to content

Commit 5de586d

Browse files
juliusmarmingejuliusmarminge
authored
feat: use trpc 11 (#1741)
1 parent 7579a52 commit 5de586d

24 files changed

+163
-179
lines changed

‎.changeset/thirty-onions-tickle.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"create-t3-app": minor
3+
---
4+
5+
feat: use trpc 11

‎cli/package.json

+5-5
Original file line numberDiff line numberDiff line change
@@ -68,11 +68,11 @@
6868
"@prisma/adapter-planetscale": "^5.10.2",
6969
"@prisma/client": "^5.10.2",
7070
"@t3-oss/env-nextjs": "^0.9.2",
71-
"@tanstack/react-query": "^4.36.1",
72-
"@trpc/client": "^10.45.1",
73-
"@trpc/next": "^10.45.1",
74-
"@trpc/react-query": "^10.45.1",
75-
"@trpc/server": "^10.45.1",
71+
"@tanstack/react-query": "^5.25.0",
72+
"@trpc/client": "next",
73+
"@trpc/next": "next",
74+
"@trpc/react-query": "next",
75+
"@trpc/server": "next",
7676
"@types/better-sqlite3": "^7.6.9",
7777
"@types/fs-extra": "^11.0.4",
7878
"@types/gradient-string": "^1.1.5",

‎cli/src/installers/dependencyVersionMap.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,11 @@ export const dependencyVersionMap = {
3131
"prettier-plugin-tailwindcss": "^0.5.11",
3232

3333
// tRPC
34-
"@trpc/client": "^10.45.1",
35-
"@trpc/server": "^10.45.1",
36-
"@trpc/react-query": "^10.45.1",
37-
"@trpc/next": "^10.45.1",
38-
"@tanstack/react-query": "^4.36.1",
34+
"@trpc/client": "next",
35+
"@trpc/server": "next",
36+
"@trpc/react-query": "next",
37+
"@trpc/next": "next",
38+
"@tanstack/react-query": "^5.25.0",
3939
superjson: "^2.2.1",
4040
"server-only": "^0.0.1",
4141
} as const;

‎cli/src/installers/trpc.ts

-4
Original file line numberDiff line numberDiff line change
@@ -103,10 +103,6 @@ export const trpcInstaller: Installer = ({
103103
path.join(trpcDir, "react.tsx"),
104104
path.join(projectDir, "src/trpc/react.tsx"),
105105
],
106-
[
107-
path.join(trpcDir, "shared.ts"),
108-
path.join(projectDir, "src/trpc/shared.ts"),
109-
],
110106
[
111107
path.join(
112108
extrasDir,

‎cli/template/extras/src/app/_components/create-post-tw.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@ export function CreatePost() {
3434
<button
3535
type="submit"
3636
className="rounded-full bg-white/10 px-10 py-3 font-semibold transition hover:bg-white/20"
37-
disabled={createPost.isLoading}
37+
disabled={createPost.isPending}
3838
>
39-
{createPost.isLoading ? "Submitting..." : "Submit"}
39+
{createPost.isPending ? "Submitting..." : "Submit"}
4040
</button>
4141
</form>
4242
);

‎cli/template/extras/src/app/_components/create-post.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,9 @@ export function CreatePost() {
3535
<button
3636
type="submit"
3737
className={styles.submitButton}
38-
disabled={createPost.isLoading}
38+
disabled={createPost.isPending}
3939
>
40-
{createPost.isLoading ? "Submitting..." : "Submit"}
40+
{createPost.isPending ? "Submitting..." : "Submit"}
4141
</button>
4242
</form>
4343
);

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

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
import { unstable_noStore as noStore } from "next/cache";
21
import Link from "next/link";
32

43
import { CreatePost } from "~/app/_components/create-post";
54
import { getServerAuthSession } from "~/server/auth";
65
import { api } from "~/trpc/server";
76

87
export default async function Home() {
9-
noStore();
10-
const hello = await api.post.hello.query({ text: "from tRPC" });
8+
const hello = await api.post.hello({ text: "from tRPC" });
119
const session = await getServerAuthSession();
1210

1311
return (
@@ -68,7 +66,7 @@ async function CrudShowcase() {
6866
const session = await getServerAuthSession();
6967
if (!session?.user) return null;
7068

71-
const latestPost = await api.post.getLatest.query();
69+
const latestPost = await api.post.getLatest();
7270

7371
return (
7472
<div className="w-full max-w-xs">

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

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { unstable_noStore as noStore } from "next/cache";
21
import Link from "next/link";
32

43
import { CreatePost } from "~/app/_components/create-post";
@@ -7,8 +6,7 @@ import { api } from "~/trpc/server";
76
import styles from "./index.module.css";
87

98
export default async function Home() {
10-
noStore();
11-
const hello = await api.post.hello.query({ text: "from tRPC" });
9+
const hello = await api.post.hello({ text: "from tRPC" });
1210
const session = await getServerAuthSession();
1311

1412
return (
@@ -69,7 +67,7 @@ async function CrudShowcase() {
6967
const session = await getServerAuthSession();
7068
if (!session?.user) return null;
7169

72-
const latestPost = await api.post.getLatest.query();
70+
const latestPost = await api.post.getLatest();
7371

7472
return (
7573
<div className={styles.showcaseContainer}>

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

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
import { unstable_noStore as noStore } from "next/cache";
21
import Link from "next/link";
32

43
import { CreatePost } from "~/app/_components/create-post";
54
import { api } from "~/trpc/server";
65

76
export default async function Home() {
8-
noStore();
9-
const hello = await api.post.hello.query({ text: "from tRPC" });
7+
const hello = await api.post.hello({ text: "from tRPC" });
108

119
return (
1210
<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() {
5149
}
5250

5351
async function CrudShowcase() {
54-
const latestPost = await api.post.getLatest.query();
52+
const latestPost = await api.post.getLatest();
5553

5654
return (
5755
<div className="w-full max-w-xs">

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

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
import { unstable_noStore as noStore } from "next/cache";
21
import Link from "next/link";
32

43
import { CreatePost } from "~/app/_components/create-post";
54
import { api } from "~/trpc/server";
65
import styles from "./index.module.css";
76

87
export default async function Home() {
9-
noStore();
10-
const hello = await api.post.hello.query({ text: "from tRPC" });
8+
const hello = await api.post.hello({ text: "from tRPC" });
119

1210
return (
1311
<main className={styles.main}>
@@ -52,7 +50,7 @@ export default async function Home() {
5250
}
5351

5452
async function CrudShowcase() {
55-
const latestPost = await api.post.getLatest.query();
53+
const latestPost = await api.post.getLatest();
5654

5755
return (
5856
<div className={styles.showcaseContainer}>

‎cli/template/extras/src/server/api/root.ts

+10-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { postRouter } from "~/server/api/routers/post";
2-
import { createTRPCRouter } from "~/server/api/trpc";
2+
import { createCallerFactory, createTRPCRouter } from "~/server/api/trpc";
33

44
/**
55
* This is the primary router for your server.
@@ -12,3 +12,12 @@ export const appRouter = createTRPCRouter({
1212

1313
// export type definition of API
1414
export type AppRouter = typeof appRouter;
15+
16+
/**
17+
* Create a server-side caller for the tRPC API.
18+
* @example
19+
* const trpc = createCaller(createContext);
20+
* const res = await trpc.post.all();
21+
* ^? Post[]
22+
*/
23+
export const createCaller = createCallerFactory(appRouter);

‎cli/template/extras/src/server/api/trpc-app/base.ts

+7
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,13 @@ const t = initTRPC.context<typeof createTRPCContext>().create({
4949
},
5050
});
5151

52+
/**
53+
* Create a server-side caller.
54+
*
55+
* @see https://trpc.io/docs/server/server-side-calls
56+
*/
57+
export const createCallerFactory = t.createCallerFactory;
58+
5259
/**
5360
* 3. ROUTER & PROCEDURE (THE IMPORTANT BIT)
5461
*

‎cli/template/extras/src/server/api/trpc-app/with-auth-db.ts

+7
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,13 @@ const t = initTRPC.context<typeof createTRPCContext>().create({
5757
},
5858
});
5959

60+
/**
61+
* Create a server-side caller.
62+
*
63+
* @see https://trpc.io/docs/server/server-side-calls
64+
*/
65+
export const createCallerFactory = t.createCallerFactory;
66+
6067
/**
6168
* 3. ROUTER & PROCEDURE (THE IMPORTANT BIT)
6269
*

‎cli/template/extras/src/server/api/trpc-app/with-auth.ts

+7
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,13 @@ const t = initTRPC.context<typeof createTRPCContext>().create({
5454
},
5555
});
5656

57+
/**
58+
* Create a server-side caller.
59+
*
60+
* @see https://trpc.io/docs/server/server-side-calls
61+
*/
62+
export const createCallerFactory = t.createCallerFactory;
63+
5764
/**
5865
* 3. ROUTER & PROCEDURE (THE IMPORTANT BIT)
5966
*

‎cli/template/extras/src/server/api/trpc-app/with-db.ts

+7
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,13 @@ const t = initTRPC.context<typeof createTRPCContext>().create({
5252
},
5353
});
5454

55+
/**
56+
* Create a server-side caller.
57+
*
58+
* @see https://trpc.io/docs/server/server-side-calls
59+
*/
60+
export const createCallerFactory = t.createCallerFactory;
61+
5562
/**
5663
* 3. ROUTER & PROCEDURE (THE IMPORTANT BIT)
5764
*

‎cli/template/extras/src/server/api/trpc-pages/base.ts

+7
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,13 @@ const t = initTRPC.context<typeof createTRPCContext>().create({
6868
},
6969
});
7070

71+
/**
72+
* Create a server-side caller.
73+
*
74+
* @see https://trpc.io/docs/server/server-side-calls
75+
*/
76+
export const createCallerFactory = t.createCallerFactory;
77+
7178
/**
7279
* 3. ROUTER & PROCEDURE (THE IMPORTANT BIT)
7380
*

‎cli/template/extras/src/server/api/trpc-pages/with-auth-db.ts

+7
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,13 @@ const t = initTRPC.context<typeof createTRPCContext>().create({
8484
},
8585
});
8686

87+
/**
88+
* Create a server-side caller.
89+
*
90+
* @see https://trpc.io/docs/server/server-side-calls
91+
*/
92+
export const createCallerFactory = t.createCallerFactory;
93+
8794
/**
8895
* 3. ROUTER & PROCEDURE (THE IMPORTANT BIT)
8996
*

‎cli/template/extras/src/server/api/trpc-pages/with-auth.ts

+7
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,13 @@ const t = initTRPC.context<typeof createTRPCContext>().create({
8282
},
8383
});
8484

85+
/**
86+
* Create a server-side caller.
87+
*
88+
* @see https://trpc.io/docs/server/server-side-calls
89+
*/
90+
export const createCallerFactory = t.createCallerFactory;
91+
8592
/**
8693
* 3. ROUTER & PROCEDURE (THE IMPORTANT BIT)
8794
*

‎cli/template/extras/src/server/api/trpc-pages/with-db.ts

+7
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,13 @@ const t = initTRPC.context<typeof createTRPCContext>().create({
7171
},
7272
});
7373

74+
/**
75+
* Create a server-side caller.
76+
*
77+
* @see https://trpc.io/docs/server/server-side-calls
78+
*/
79+
export const createCallerFactory = t.createCallerFactory;
80+
7481
/**
7582
* 3. ROUTER & PROCEDURE (THE IMPORTANT BIT)
7683
*

‎cli/template/extras/src/trpc/react.tsx

+14-3
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
44
import { loggerLink, unstable_httpBatchStreamLink } from "@trpc/client";
55
import { createTRPCReact } from "@trpc/react-query";
66
import { useState } from "react";
7+
import SuperJSON from "superjson";
78

89
import { type AppRouter } from "~/server/api/root";
9-
import { getUrl, transformer } from "./shared";
1010

1111
const createQueryClient = () => new QueryClient();
1212

@@ -27,15 +27,20 @@ export function TRPCReactProvider(props: { children: React.ReactNode }) {
2727

2828
const [trpcClient] = useState(() =>
2929
api.createClient({
30-
transformer,
3130
links: [
3231
loggerLink({
3332
enabled: (op) =>
3433
process.env.NODE_ENV === "development" ||
3534
(op.direction === "down" && op.result instanceof Error),
3635
}),
3736
unstable_httpBatchStreamLink({
38-
url: getUrl(),
37+
transformer: SuperJSON,
38+
url: getBaseUrl() + "/api/trpc",
39+
headers: () => {
40+
const headers = new Headers();
41+
headers.set("x-trpc-source", "nextjs-react");
42+
return headers;
43+
},
3944
}),
4045
],
4146
})
@@ -49,3 +54,9 @@ export function TRPCReactProvider(props: { children: React.ReactNode }) {
4954
</QueryClientProvider>
5055
);
5156
}
57+
58+
function getBaseUrl() {
59+
if (typeof window !== "undefined") return window.location.origin;
60+
if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
61+
return `http://localhost:${process.env.PORT ?? 3000}`;
62+
}

0 commit comments

Comments
 (0)