feat(react-query): next-app-router example with prefetch helpers

.github/workflows/lint.yml

@@ -3,6 +3,8 @@ permissions:
   contents: read
 on:
   pull_request:
+    branches:
+      - '!app-router-example'
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

.gitignore

@@ -7,6 +7,8 @@ dist/
 .eslintcache
 *.tsbuildinfo
 
+db.sqlite
+
 node_modules/
 package-lock.json
 yarn.lock

examples/next-app-router/.env

@@ -0,0 +1,4 @@
+AUTH_GITHUB_ID=''
+AUTH_GITHUB_SECRET=''
+AUTH_URL='http://localhost:3000'
+AUTH_SECRET='s1cIAYmD4Rb1KbeAYebbgUauyoT+/KrRV7d97c3DfqI='

examples/next-app-router/README.md

@@ -0,0 +1,21 @@
+# Next.js App Router + tRPC
+
+This example shows you how to use tRPC with the Next.js App Router. Spiced up with some Tailwind and some shadcn/ui components.
+
+## Setup
+
+```bash
+npx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-app-router trpc-next-app-router
+cd next-app-router
+pnpm i
+pnpm db:push
+pnpm dev
+```
+
+## Development
+
+### Start project
+
+```bash
+pnpm dev
+```

examples/next-app-router/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/next-app-router/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  eslint: { ignoreDuringBuilds: true },
+};
+
+export default nextConfig;

examples/next-app-router/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@examples/next-app-router",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "db:push": "drizzle-kit push:sqlite --config src/db/config.ts",
+    "db:studio": "drizzle-kit studio --config src/db/config.ts"
+  },
+  "dependencies": {
+    "@auth/drizzle-adapter": "^0.6.2",
+    "@hookform/resolvers": "npm:@hookform/resolvers@3.3.4",
+    "@juliusmarminge/next-themes": "^0.3.0",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@tanstack/react-query": "^5.0.0",
+    "@trpc/client": "npm:@trpc/client@next",
+    "@trpc/next": "npm:@trpc/next@next",
+    "@trpc/react-query": "npm:@trpc/react-query@next",
+    "@trpc/server": "npm:@trpc/server@next",
+    "better-sqlite3": "^9.4.0",
+    "class-variance-authority": "^0.7.0",
+    "drizzle-orm": "^0.29.3",
+    "geist": "^1.2.2",
+    "next": "^14.0.1",
+    "next-auth": "npm:next-auth@5.0.0-beta.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.43.3",
+    "server-only": "^0.0.1",
+    "sonner": "^1.4.0",
+    "tailwind-merge": "^2.0.0",
+    "tupleson": "0.23.1",
+    "zod": "^3.0.0"
+  },
+  "devDependencies": {
+    "@tanstack/react-query-devtools": "^5.0.0",
+    "@types/node": "^20.10.0",
+    "@types/react": "^18.2.33",
+    "@types/react-dom": "^18.2.14",
+    "drizzle-kit": "^0.20.14",
+    "eslint": "^8.40.0",
+    "eslint-config-next": "^14.0.1",
+    "postcss": "^8.4.14",
+    "tailwindcss": "^3.3.0",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.3.3"
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": "next/core-web-vitals"
+  }
+}

examples/next-app-router/postcss.config.cjs

@@ -0,0 +1 @@
+module.exports = { plugins: { tailwindcss: {} } };

examples/next-app-router/src/app/_components/posts.tsx

@@ -0,0 +1,117 @@
+'use client';
+
+import { CreatePostSchema } from '~/lib/validators';
+import { trpc } from '~/trpc/react';
+import { Button } from '~/ui/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+  useForm,
+} from '~/ui/form';
+import { Input } from '~/ui/input';
+import { toast } from 'sonner';
+
+export function Posts() {
+  // Won't be fetched initially, but instead pulled from query cache.
+  const [data] = trpc.post.list.useSuspenseQuery();
+
+  const utils = trpc.useUtils();
+  const deletePost = trpc.post.delete.useMutation({
+    onSuccess: async () => {
+      await utils.post.invalidate();
+    },
+    onError: (err) => {
+      toast.error(
+        err?.data?.code === 'UNAUTHORIZED'
+          ? 'You can only delete your own posts'
+          : 'Failed to delete post',
+      );
+    },
+  });
+
+  return (
+    <div className="flex flex-col gap-4">
+      <CreatePost />
+      {data.length === 0 && <p>No posts</p>}
+
+      {data.map(({ post, user }) => (
+        <div key={post.id} className="bg-background-muted relative rounded p-4">
+          <h2 className="text-lg font-semibold">{post.title}</h2>
+          <p className="text-sm">{post.content}</p>
+          <p className="text-xs text-gray-500">
+            By {user?.name ?? 'unknown'} at {post.createdAt.toISOString()}
+          </p>
+          <Button
+            onClick={() => deletePost.mutate(post.id)}
+            className="absolute right-2 top-2"
+          >
+            Delete
+          </Button>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function CreatePost() {
+  const form = useForm({
+    schema: CreatePostSchema,
+    defaultValues: {
+      content: '',
+      title: '',
+    },
+  });
+
+  const utils = trpc.useUtils();
+  const createPost = trpc.post.create.useMutation({
+    onSuccess: async () => {
+      form.reset();
+      await utils.post.invalidate();
+    },
+    onError: (err) => {
+      toast.error(
+        err?.data?.code === 'UNAUTHORIZED'
+          ? 'You must be logged in to post'
+          : 'Failed to create post',
+      );
+    },
+  });
+
+  return (
+    <Form {...form}>
+      <form
+        className="flex w-full flex-col gap-2"
+        onSubmit={form.handleSubmit((data) => createPost.mutate(data))}
+      >
+        <FormField
+          control={form.control}
+          name="title"
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <Input {...field} placeholder="Title" />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="content"
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <Input {...field} placeholder="Content" />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button>Create</Button>
+      </form>
+    </Form>
+  );
+}

examples/next-app-router/src/app/_components/user-button.tsx

@@ -0,0 +1,33 @@
+import { auth, signIn, signOut } from '~/lib/auth';
+import { Button } from '~/ui/button';
+
+export async function UserButton() {
+  const session = await auth();
+  if (session) {
+    return (
+      <form
+        action={async () => {
+          'use server';
+          await signOut();
+        }}
+      >
+        <Button type="submit" className="px-10">
+          Sign Out
+        </Button>
+      </form>
+    );
+  }
+
+  return (
+    <form
+      action={async () => {
+        'use server';
+        await signIn('github', { redirectTo: '/' });
+      }}
+    >
+      <Button type="submit" className="px-10">
+        Sign in with GitHub
+      </Button>
+    </form>
+  );
+}

examples/next-app-router/src/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1 @@
+export { GET, POST } from '~/lib/auth';

examples/next-app-router/src/app/api/trpc/[trpc]/route.ts

@@ -0,0 +1,19 @@
+import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
+import { auth } from '~/lib/auth';
+import { createTRPCContext } from '~/trpc/init';
+import { appRouter } from '~/trpc/routers/_app';
+
+const handler = auth(async (req) =>
+  fetchRequestHandler({
+    endpoint: '/api/trpc',
+    router: appRouter,
+    req,
+    createContext: () =>
+      createTRPCContext({
+        session: req.auth,
+        headers: req.headers,
+      }),
+  }),
+);
+
+export { handler as GET, handler as POST };

examples/next-app-router/src/app/globals.css

@@ -0,0 +1,51 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --background-muted: 240 4.8% 95.9%;
+    --foreground: 240 10% 3.9%;
+    --foreground-muted: 240 3.8% 46.1%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 72.22% 50.59%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5% 64.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --background-muted: 240 3.7% 15.9%;
+    --foreground: 0 0% 98%;
+    --foreground-muted: 240 5% 64.9%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 85.7% 97.3%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+}

examples/next-app-router/src/app/layout.tsx

@@ -0,0 +1,38 @@
+import './globals.css';
+import { ThemeProvider } from '@juliusmarminge/next-themes';
+import { cn } from '~/lib/cn';
+import { TRPCReactProvider } from '~/trpc/react';
+import { Toaster } from '~/ui/sonner';
+import { GeistSans } from 'geist/font/sans';
+import type { Metadata, Viewport } from 'next';
+
+export const metadata = {
+  title: 'Next.js App Router x tRPC',
+  description: 'Next.js App Router x tRPC',
+  icons: [{ rel: 'icon', url: '/favicon.ico' }],
+} satisfies Metadata;
+
+export const viewport = {
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: 'white' },
+    { media: '(prefers-color-scheme: dark)', color: 'black' },
+  ],
+} satisfies Viewport;
+
+export default function RootLayout(props: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={cn(
+          'bg-background text-foreground min-h-screen font-sans antialiased',
+          GeistSans.variable,
+        )}
+      >
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+          <TRPCReactProvider>{props.children}</TRPCReactProvider>
+          <Toaster />
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}