& {
11 | getLayout?: (page: ReactElement) => ReactNode;
12 | };
13 |
14 | type AppPropsWithLayout = AppProps & {
15 | Component: NextPageWithLayout;
16 | };
17 |
18 | const MyApp = (({ Component, pageProps }: AppPropsWithLayout) => {
19 | const getLayout =
20 | Component.getLayout ?? ((page) => {page});
21 |
22 | return getLayout();
23 | }) as AppType;
24 |
25 | export default trpc.withTRPC(MyApp);
26 |
--------------------------------------------------------------------------------
/src/pages/api/trpc/[trpc].ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file contains tRPC's HTTP response handler
3 | */
4 | import * as trpcNext from '@trpc/server/adapters/next';
5 | import { createContext } from '~/server/context';
6 | import { appRouter } from '~/server/routers/_app';
7 |
8 | export default trpcNext.createNextApiHandler({
9 | router: appRouter,
10 | /**
11 | * @link https://trpc.io/docs/context
12 | */
13 | createContext,
14 | /**
15 | * @link https://trpc.io/docs/error-handling
16 | */
17 | onError({ error }) {
18 | if (error.code === 'INTERNAL_SERVER_ERROR') {
19 | // send to bug reporting
20 | console.error('Something went wrong', error);
21 | }
22 | },
23 | /**
24 | * Enable query batching
25 | */
26 | batching: {
27 | enabled: true,
28 | },
29 | /**
30 | * @link https://trpc.io/docs/caching#api-response-caching
31 | */
32 | // responseMeta() {
33 | // // ...
34 | // },
35 | });
36 |
--------------------------------------------------------------------------------
/src/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import { trpc } from '../utils/trpc';
2 | import { NextPageWithLayout } from './_app';
3 | import Link from 'next/link';
4 | import React from 'react';
5 |
6 | const IndexPage: NextPageWithLayout = () => {
7 | const utils = trpc.useContext();
8 | const postsQuery = trpc.post.list.useQuery();
9 |
10 | const addPost = trpc.post.add.useMutation({
11 | async onSuccess() {
12 | // refetches posts after a post is added
13 | await utils.post.list.invalidate();
14 | },
15 | });
16 |
17 | // prefetch all posts for instant navigation
18 | // React.useEffect(() => {
19 | // for (const { id } of postsQuery.data ?? []) {
20 | // utils.post.byId.prefetch({ id });
21 | // }
22 | // }, [postsQuery.data, utils]);
23 |
24 | return (
25 | <>
26 | Welcome to your tRPC starter!
27 |
28 | Check the docs whenever you get
29 | stuck, or ping @alexdotjs on
30 | Twitter.
31 |
32 |
33 |
34 | Posts
35 | {postsQuery.status === 'loading' && '(loading)'}
36 |
37 | {postsQuery.data?.map((item) => (
38 |
39 | {item.title}
40 |
41 | View more
42 |
43 |
44 | ))}
45 |
46 |
47 |
48 |
90 |
91 | );
92 | };
93 |
94 | export default IndexPage;
95 |
96 | /**
97 | * If you want to statically render this page
98 | * - Export `appRouter` & `createContext` from [trpc].ts
99 | * - Make the `opts` object optional on `createContext()`
100 | *
101 | * @link https://trpc.io/docs/ssg
102 | */
103 | // export const getStaticProps = async (
104 | // context: GetStaticPropsContext<{ filter: string }>,
105 | // ) => {
106 | // const ssg = createSSGHelpers({
107 | // router: appRouter,
108 | // ctx: await createContext(),
109 | // });
110 | //
111 | // await ssg.fetchQuery('post.all');
112 | //
113 | // return {
114 | // props: {
115 | // trpcState: ssg.dehydrate(),
116 | // filter: context.params?.filter ?? 'all',
117 | // },
118 | // revalidate: 1,
119 | // };
120 | // };
121 |
--------------------------------------------------------------------------------
/src/pages/post/[id].tsx:
--------------------------------------------------------------------------------
1 | import NextError from 'next/error';
2 | import { useRouter } from 'next/router';
3 | import { NextPageWithLayout } from '~/pages/_app';
4 | import { trpc } from '~/utils/trpc';
5 |
6 | const PostViewPage: NextPageWithLayout = () => {
7 | const id = useRouter().query.id as string;
8 | const postQuery = trpc.post.byId.useQuery({ id });
9 |
10 | if (postQuery.error) {
11 | return (
12 |
16 | );
17 | }
18 |
19 | if (postQuery.status !== 'success') {
20 | return <>Loading...;
21 | }
22 | const { data } = postQuery;
23 | return (
24 | <>
25 | {data.title}
26 | Created {data.createdAt.toLocaleDateString('en-us')}
27 |
28 | {data.text}
29 |
30 | Raw data:
31 | {JSON.stringify(data, null, 4)}
32 |
33 | );
34 | };
35 |
36 | export default PostViewPage;
37 |
--------------------------------------------------------------------------------
/src/server/context.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-unused-vars */
2 | import * as trpc from '@trpc/server';
3 | import * as trpcNext from '@trpc/server/adapters/next';
4 |
5 | // eslint-disable-next-line @typescript-eslint/no-empty-interface
6 | interface CreateContextOptions {
7 | // session: Session | null
8 | }
9 |
10 | /**
11 | * Inner function for `createContext` where we create the context.
12 | * This is useful for testing when we don't want to mock Next.js' request/response
13 | */
14 | export async function createContextInner(_opts: CreateContextOptions) {
15 | return {};
16 | }
17 |
18 | export type Context = trpc.inferAsyncReturnType;
19 |
20 | /**
21 | * Creates context for an incoming request
22 | * @link https://trpc.io/docs/context
23 | */
24 | export async function createContext(
25 | opts: trpcNext.CreateNextContextOptions,
26 | ): Promise {
27 | // for API-response caching see https://trpc.io/docs/caching
28 |
29 | return await createContextInner({});
30 | }
31 |
--------------------------------------------------------------------------------
/src/server/env.js:
--------------------------------------------------------------------------------
1 | // @ts-check
2 | /**
3 | * This file is included in `/next.config.js` which ensures the app isn't built with invalid env vars.
4 | * It has to be a `.js`-file to be imported there.
5 | */
6 | /* eslint-disable @typescript-eslint/no-var-requires */
7 | const { z } = require('zod');
8 |
9 | /*eslint sort-keys: "error"*/
10 | const envSchema = z.object({
11 | // DATABASE_URL: z.string().url(),
12 | NODE_ENV: z.enum(['development', 'test', 'production']),
13 | });
14 |
15 | const env = envSchema.safeParse(process.env);
16 |
17 | if (!env.success) {
18 | console.error(
19 | '❌ Invalid environment variables:',
20 | JSON.stringify(env.error.format(), null, 4),
21 | );
22 | process.exit(1);
23 | }
24 | module.exports.env = env.data;
25 |
--------------------------------------------------------------------------------
/src/server/prisma.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Instantiates a single instance PrismaClient and save it on the global object.
3 | * @link https://www.prisma.io/docs/support/help-articles/nextjs-prisma-client-dev-practices
4 | */
5 | import { env } from './env';
6 | import { PrismaClient } from '@prisma/client';
7 |
8 | const prismaGlobal = global as typeof global & {
9 | prisma?: PrismaClient;
10 | };
11 |
12 | export const prisma: PrismaClient =
13 | prismaGlobal.prisma ||
14 | new PrismaClient({
15 | log:
16 | env.NODE_ENV === 'development' ? ['query', 'error', 'warn'] : ['error'],
17 | });
18 |
19 | if (env.NODE_ENV !== 'production') {
20 | prismaGlobal.prisma = prisma;
21 | }
22 |
--------------------------------------------------------------------------------
/src/server/routers/_app.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file contains the root router of your tRPC-backend
3 | */
4 | import { router } from '../trpc';
5 | import { healthRouter } from './health';
6 | import { postRouter } from './post';
7 |
8 | export const appRouter = router({
9 | post: postRouter,
10 | health: healthRouter,
11 | });
12 |
13 | export type AppRouter = typeof appRouter;
14 |
--------------------------------------------------------------------------------
/src/server/routers/health.ts:
--------------------------------------------------------------------------------
1 | import { router, baseProcedure } from '../trpc';
2 |
3 | export const healthRouter = router({
4 | healthz: baseProcedure.query(() => 'yay!'),
5 | });
6 |
--------------------------------------------------------------------------------
/src/server/routers/post.test.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Integration test example for the `post` router
3 | */
4 | import { createContextInner } from '../context';
5 | import { AppRouter, appRouter } from './_app';
6 | import { inferProcedureInput } from '@trpc/server';
7 |
8 | test('add and get post', async () => {
9 | const ctx = await createContextInner({});
10 | const caller = appRouter.createCaller(ctx);
11 |
12 | const input: inferProcedureInput = {
13 | text: 'hello test',
14 | title: 'hello test',
15 | };
16 |
17 | const post = await caller.post.add(input);
18 | const byId = await caller.post.byId({ id: post.id });
19 |
20 | expect(byId).toMatchObject(input);
21 | });
22 |
--------------------------------------------------------------------------------
/src/server/routers/post.ts:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * This is an example router, you can delete this file and then update `../pages/api/trpc/[trpc].tsx`
4 | */
5 | import { router, baseProcedure } from '../trpc';
6 | import { Prisma } from '@prisma/client';
7 | import { TRPCError } from '@trpc/server';
8 | import { z } from 'zod';
9 | import { prisma } from '~/server/prisma';
10 |
11 | /**
12 | * Default selector for Post.
13 | * It's important to always explicitly say which fields you want to return in order to not leak extra information
14 | * @see https://github.com/prisma/prisma/issues/9353
15 | */
16 | const defaultPostSelect = Prisma.validator()({
17 | id: true,
18 | title: true,
19 | text: true,
20 | createdAt: true,
21 | updatedAt: true,
22 | });
23 |
24 | export const postRouter = router({
25 | list: baseProcedure.query(() => {
26 | /**
27 | * For pagination you can have a look at this docs site
28 | * @link https://trpc.io/docs/useInfiniteQuery
29 | */
30 |
31 | return prisma.post.findMany({
32 | select: defaultPostSelect,
33 | });
34 | }),
35 | byId: baseProcedure
36 | .input(
37 | z.object({
38 | id: z.string(),
39 | }),
40 | )
41 | .query(async ({ input }) => {
42 | const { id } = input;
43 | const post = await prisma.post.findUnique({
44 | where: { id },
45 | select: defaultPostSelect,
46 | });
47 | if (!post) {
48 | throw new TRPCError({
49 | code: 'NOT_FOUND',
50 | message: `No post with id '${id}'`,
51 | });
52 | }
53 | return post;
54 | }),
55 | add: baseProcedure
56 | .input(
57 | z.object({
58 | id: z.string().uuid().optional(),
59 | title: z.string().min(1).max(32),
60 | text: z.string().min(1),
61 | }),
62 | )
63 | .mutation(async ({ input }) => {
64 | const post = await prisma.post.create({
65 | data: input,
66 | select: defaultPostSelect,
67 | });
68 | return post;
69 | }),
70 | });
71 |
--------------------------------------------------------------------------------
/src/server/trpc.ts:
--------------------------------------------------------------------------------
1 | import { Context } from './context';
2 | import { initTRPC } from '@trpc/server';
3 | import superjson from 'superjson';
4 |
5 | const t = initTRPC.context().create({
6 | transformer: superjson,
7 | errorFormatter({ shape }) {
8 | return shape;
9 | },
10 | });
11 |
12 | export const router = t.router;
13 | export const baseProcedure = t.procedure;
14 |
--------------------------------------------------------------------------------
/src/utils/publicRuntimeConfig.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Dynamic configuration available for the browser and server populated from your `next.config.js`.
3 | * Note: requires `ssr: true` or a `getInitialProps` in `_app.tsx`
4 | * @link https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration
5 | */
6 | import type * as config from '../../next.config';
7 | import getConfig from 'next/config';
8 |
9 | /**
10 | * Inferred type from `publicRuntime` in `next.config.js`
11 | */
12 | type PublicRuntimeConfig = typeof config.publicRuntimeConfig;
13 |
14 | const nextConfig = getConfig();
15 |
16 | export const publicRuntimeConfig =
17 | nextConfig.publicRuntimeConfig as PublicRuntimeConfig;
18 |
--------------------------------------------------------------------------------
/src/utils/trpc.ts:
--------------------------------------------------------------------------------
1 | import { httpBatchLink, loggerLink } from '@trpc/client';
2 | import { createTRPCNext } from '@trpc/next';
3 | import { NextPageContext } from 'next';
4 | import superjson from 'superjson';
5 | // ℹ️ Type-only import:
6 | // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export
7 | import type { AppRouter } from '~/server/routers/_app';
8 |
9 | function getBaseUrl() {
10 | if (typeof window !== 'undefined') {
11 | return '';
12 | }
13 | // reference for vercel.com
14 | if (process.env.VERCEL_URL) {
15 | return `https://${process.env.VERCEL_URL}`;
16 | }
17 |
18 | // // reference for render.com
19 | if (process.env.RENDER_INTERNAL_HOSTNAME) {
20 | return `http://${process.env.RENDER_INTERNAL_HOSTNAME}:${process.env.PORT}`;
21 | }
22 |
23 | // assume localhost
24 | return `http://localhost:${process.env.PORT ?? 3000}`;
25 | }
26 |
27 | /**
28 | * Extend `NextPageContext` with meta data that can be picked up by `responseMeta()` when server-side rendering
29 | */
30 | export interface SSRContext extends NextPageContext {
31 | /**
32 | * Set HTTP Status code
33 | * @example
34 | * const utils = trpc.useContext();
35 | * if (utils.ssrContext) {
36 | * utils.ssrContext.status = 404;
37 | * }
38 | */
39 | status?: number;
40 | }
41 |
42 | /**
43 | * A set of strongly-typed React hooks from your `AppRouter` type signature with `createReactQueryHooks`.
44 | * @link https://trpc.io/docs/react#3-create-trpc-hooks
45 | */
46 | export const trpc = createTRPCNext({
47 | config() {
48 | /**
49 | * If you want to use SSR, you need to use the server's full URL
50 | * @link https://trpc.io/docs/ssr
51 | */
52 | return {
53 | /**
54 | * @link https://trpc.io/docs/data-transformers
55 | */
56 | transformer: superjson,
57 | /**
58 | * @link https://trpc.io/docs/links
59 | */
60 | links: [
61 | // adds pretty logs to your console in development and logs errors in production
62 | loggerLink({
63 | enabled: (opts) =>
64 | process.env.NODE_ENV === 'development' ||
65 | (opts.direction === 'down' && opts.result instanceof Error),
66 | }),
67 |
68 | httpBatchLink({
69 | url: `${getBaseUrl()}/api/trpc`,
70 | }),
71 | ],
72 | /**
73 | * @link https://react-query.tanstack.com/reference/QueryClient
74 | */
75 | // queryClientConfig: { defaultOptions: { queries: { staleTime: 60 } } },
76 | };
77 | },
78 | /**
79 | * @link https://trpc.io/docs/ssr
80 | */
81 | ssr: true,
82 | /**
83 | * Set headers or status code when doing SSR
84 | */
85 | responseMeta(opts) {
86 | const ctx = opts.ctx as SSRContext;
87 |
88 | if (ctx.status) {
89 | // If HTTP status set, propagate that
90 | return {
91 | status: ctx.status,
92 | };
93 | }
94 |
95 | const error = opts.clientErrors[0];
96 | if (error) {
97 | // Propagate http first error from API calls
98 | return {
99 | status: error.data?.httpStatus ?? 500,
100 | };
101 | }
102 |
103 | // for app caching with SSR see https://trpc.io/docs/caching
104 |
105 | return {};
106 | },
107 | });
108 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es6",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "strictNullChecks": true,
9 | "forceConsistentCasingInFileNames": true,
10 | "noEmit": true,
11 | "esModuleInterop": true,
12 | "module": "esnext",
13 | "moduleResolution": "node",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "jsx": "preserve",
17 | "incremental": true,
18 | "baseUrl": ".",
19 | "paths": {
20 | "~/*": ["src/*"]
21 | }
22 | },
23 | "include": [
24 | "next-env.d.ts",
25 | "**/*.ts",
26 | "**/*.tsx",
27 | "./*.js",
28 | "./src/**/*.js"
29 | ],
30 | "exclude": ["node_modules"]
31 | }
32 |
--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
1 | import { fileURLToPath } from 'url';
2 | import { configDefaults, defineConfig } from 'vitest/config';
3 |
4 | export default defineConfig({
5 | test: {
6 | globals: true,
7 | exclude: [...configDefaults.exclude, '**/playwright/**'],
8 | alias: {
9 | '~/': fileURLToPath(new URL('./src/', import.meta.url)),
10 | },
11 | },
12 | });
13 |
--------------------------------------------------------------------------------