Skip to content

Commit

Permalink
feat: use trpc 11 (t3-oss#1741)
Browse files Browse the repository at this point in the history
  • Loading branch information
juliusmarminge authored Mar 14, 2024
1 parent 388fcd8 commit 4f6fbb0
Show file tree
Hide file tree
Showing 24 changed files with 163 additions and 179 deletions.
5 changes: 5 additions & 0 deletions .changeset/thirty-onions-tickle.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"create-t3-app": minor
---

feat: use trpc 11
10 changes: 5 additions & 5 deletions cli/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
10 changes: 5 additions & 5 deletions cli/src/installers/dependencyVersionMap.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 0 additions & 4 deletions cli/src/installers/trpc.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions cli/template/extras/src/app/_components/create-post-tw.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
4 changes: 2 additions & 2 deletions cli/template/extras/src/app/_components/create-post.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
6 changes: 2 additions & 4 deletions cli/template/extras/src/app/page/with-auth-trpc-tw.tsx
Original file line number Diff line number Diff line change
@@ -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 (
Expand Down Expand Up @@ -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">
Expand Down
6 changes: 2 additions & 4 deletions cli/template/extras/src/app/page/with-auth-trpc.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { unstable_noStore as noStore } from "next/cache";
import Link from "next/link";

import { CreatePost } from "~/app/_components/create-post";
Expand All @@ -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 (
Expand Down Expand Up @@ -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}>
Expand Down
6 changes: 2 additions & 4 deletions cli/template/extras/src/app/page/with-trpc-tw.tsx
Original file line number Diff line number Diff line change
@@ -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">
Expand Down Expand Up @@ -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">
Expand Down
6 changes: 2 additions & 4 deletions cli/template/extras/src/app/page/with-trpc.tsx
Original file line number Diff line number Diff line change
@@ -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}>
Expand Down Expand Up @@ -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}>
Expand Down
11 changes: 10 additions & 1 deletion cli/template/extras/src/server/api/root.ts
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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);
7 changes: 7 additions & 0 deletions cli/template/extras/src/server/api/trpc-app/base.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
*
Expand Down
7 changes: 7 additions & 0 deletions cli/template/extras/src/server/api/trpc-app/with-auth-db.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
*
Expand Down
7 changes: 7 additions & 0 deletions cli/template/extras/src/server/api/trpc-app/with-auth.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
*
Expand Down
7 changes: 7 additions & 0 deletions cli/template/extras/src/server/api/trpc-app/with-db.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
*
Expand Down
7 changes: 7 additions & 0 deletions cli/template/extras/src/server/api/trpc-pages/base.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
*
Expand Down
7 changes: 7 additions & 0 deletions cli/template/extras/src/server/api/trpc-pages/with-auth-db.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
*
Expand Down
7 changes: 7 additions & 0 deletions cli/template/extras/src/server/api/trpc-pages/with-auth.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
*
Expand Down
7 changes: 7 additions & 0 deletions cli/template/extras/src/server/api/trpc-pages/with-db.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
*
Expand Down
17 changes: 14 additions & 3 deletions cli/template/extras/src/trpc/react.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand All @@ -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;
},
}),
],
})
Expand All @@ -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}`;
}
Loading

0 comments on commit 4f6fbb0

Please sign in to comment.