Merge pull request #206 from axiomhq/trpc-example-2

docs: update tRPC / app router example

examples/trpc-app-router/.eslintrc.cjs

@@ -1,30 +1,30 @@
 /** @type {import("eslint").Linter.Config} */
 const config = {
-  parser: "@typescript-eslint/parser",
+  parser: '@typescript-eslint/parser',
   parserOptions: {
     project: true,
   },
-  plugins: ["@typescript-eslint"],
+  plugins: ['@typescript-eslint'],
   extends: [
-    "next/core-web-vitals",
-    "plugin:@typescript-eslint/recommended-type-checked",
-    "plugin:@typescript-eslint/stylistic-type-checked",
+    'next/core-web-vitals',
+    'plugin:@typescript-eslint/recommended-type-checked',
+    'plugin:@typescript-eslint/stylistic-type-checked',
   ],
   rules: {
     // These opinionated rules are enabled in stylistic-type-checked above.
     // Feel free to reconfigure them to your own preference.
-    "@typescript-eslint/array-type": "off",
-    "@typescript-eslint/consistent-type-definitions": "off",
+    '@typescript-eslint/array-type': 'off',
+    '@typescript-eslint/consistent-type-definitions': 'off',
 
-    "@typescript-eslint/consistent-type-imports": [
-      "warn",
+    '@typescript-eslint/consistent-type-imports': [
+      'warn',
       {
-        prefer: "type-imports",
-        fixStyle: "inline-type-imports",
+        prefer: 'type-imports',
+        fixStyle: 'inline-type-imports',
       },
     ],
-    "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
-    "@typescript-eslint/no-misused-promises": [
+    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+    '@typescript-eslint/no-misused-promises': [
       2,
       {
         checksVoidReturn: { attributes: false },

examples/trpc-app-router/.prettierrc.mjs

@@ -0,0 +1,9 @@
+/** @type {import("prettier").Config} */
+const config = {
+  trailingComma: 'all',
+  tabWidth: 2,
+  semi: true,
+  singleQuote: true,
+};
+
+export default config;

examples/trpc-app-router/next.config.mjs

@@ -1,10 +1,4 @@
-import { withAxiomNextConfig } from "next-axiom";
-
-/**
- * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
- * for Docker builds.
- */
-await import("./src/env.mjs");
+import { withAxiomNextConfig } from 'next-axiom';
 
 /** @type {import("next").NextConfig} */
 const config = {};

examples/trpc-app-router/package.json

@@ -7,10 +7,10 @@
     "dev": "next dev",
     "lint": "next lint",
     "start": "next start",
+    "format": "prettier --write .",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@t3-oss/env-nextjs": "^0.7.3",
     "@tanstack/react-query": "^4.36.1",
     "@trpc/client": "^10.45.2",
     "@trpc/next": "^10.45.2",

examples/trpc-app-router/src/app/_components/create-post.tsx

@@ -1,18 +1,24 @@
-"use client";
+'use client';
 
-import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useLogger } from 'next-axiom';
 
-import { api } from "~/trpc/react";
+import { api } from '~/trpc/react';
 
 export function CreatePost() {
   const router = useRouter();
-  const [name, setName] = useState("");
+  const logger = useLogger();
+  const [name, setName] = useState('');
 
   const createPost = api.post.create.useMutation({
-    onSuccess: () => {
+    onSuccess: (input, res) => {
       router.refresh();
-      setName("");
+      logger.info(
+        'Sending a multiline log from the frontend\nThis is the second line',
+        { input, res },
+      );
+      setName('');
     },
   });
 
@@ -30,7 +36,7 @@ export function CreatePost() {
         onChange={(e) => setName(e.target.value)}
       />
       <button type="submit" disabled={createPost.isLoading}>
-        {createPost.isLoading ? "Submitting..." : "Submit"}
+        {createPost.isLoading ? 'Submitting...' : 'Submit'}
       </button>
     </form>
   );

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

@@ -1,26 +1,28 @@
-import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
-import { withAxiomRouteHandler } from "next-axiom";
-import { type NextRequest } from "next/server";
+import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
+import { withAxiomRouteHandler } from 'next-axiom';
+import { type NextRequest } from 'next/server';
 
-import { env } from "~/env.mjs";
-import { appRouter } from "~/server/api/root";
-import { createTRPCContext } from "~/server/api/trpc";
+import { appRouter } from '~/server/api/root';
+import { createTRPCContext } from '~/server/api/trpc';
+
+export const dynamic = 'force-dynamic';
+export const revalidate = 0;
 
 const handler = withAxiomRouteHandler((req: NextRequest) =>
   fetchRequestHandler({
-    endpoint: "/api/trpc",
+    endpoint: '/api/trpc',
     req,
     router: appRouter,
     createContext: () => createTRPCContext({ req }),
     onError:
-      env.NODE_ENV === "development"
+      process.env.NODE_ENV === 'development'
         ? ({ path, error }) => {
             console.error(
-              `❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`
+              `❌ tRPC failed on ${path ?? '<no-path>'}: ${error.message}`,
             );
           }
         : undefined,
-  })
+  }),
 );
 
 export { handler as GET, handler as POST };

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

@@ -1,18 +1,20 @@
-import { Inter } from "next/font/google";
-import { cookies } from "next/headers";
+import { Inter } from 'next/font/google';
+import { cookies } from 'next/headers';
 
-import { TRPCReactProvider } from "~/trpc/react";
+import { TRPCReactProvider } from '~/trpc/react';
 
 const inter = Inter({
-  subsets: ["latin"],
+  subsets: ['latin'],
 });
 
 export const metadata = {
-  title: "Create T3 App",
-  description: "Generated by create-t3-app",
-  icons: [{ rel: "icon", url: "/favicon.ico" }],
+  title: 'Create T3 App',
+  description: 'Generated by create-t3-app',
+  icons: [{ rel: 'icon', url: '/favicon.ico' }],
 };
 
+export const dynamic = 'force-dynamic';
+
 export default function RootLayout({
   children,
 }: {

examples/trpc-app-router/src/app/page.tsx

@@ -1,16 +1,16 @@
-import { CreatePost } from "~/app/_components/create-post";
-import { api } from "~/trpc/server";
+import { CreatePost } from '~/app/_components/create-post';
+import { api } from '~/trpc/server';
 
 export default async function Home() {
-  const hello = await api.post.hello.query({ text: "from tRPC" });
+  const hello = await api.post.hello.query({ text: 'from tRPC' });
 
   return (
     <main>
       <div>
         <h1>Create T3 App (App Router)</h1>
 
         <div>
-          <p>{hello ? hello.greeting : "Loading tRPC query..."}</p>
+          <p>{hello ? hello.greeting : 'Loading tRPC query...'}</p>
         </div>
 
         <CrudShowcase />

examples/trpc-app-router/src/server/api/axiom-trpc.ts

@@ -1,7 +1,7 @@
-import { initTRPC } from "@trpc/server";
-import { type NextRequest } from "next/server";
-import { type AxiomRequest, Logger } from "next-axiom";
-import { type createTRPCContext } from "./trpc";
+import { initTRPC } from '@trpc/server';
+import { type NextRequest } from 'next/server';
+import { type AxiomRequest, Logger } from 'next-axiom';
+import { type createTRPCContext } from './trpc';
 
 export type NextAxiomTRPCMiddlewareCtx = {
   /**
@@ -34,7 +34,7 @@ export function createAxiomPlugin() {
 
       if (!isAxiomRequest(req)) {
         throw new Error(
-          "`nextAxiomTRPCMiddleware` could not find logger. Did you forget to wrap your route handler in `withAxiom`? See: TODO: link to docs"
+          '`nextAxiomTRPCMiddleware` could not find logger. Did you forget to wrap your route handler in `withAxiom`? See: TODO: link to docs',
         );
       }
 

examples/trpc-app-router/src/server/api/root.ts

@@ -1,5 +1,5 @@
-import { postRouter } from "~/server/api/routers/post";
-import { createTRPCRouter } from "~/server/api/trpc";
+import { postRouter } from '~/server/api/routers/post';
+import { createTRPCRouter } from '~/server/api/trpc';
 
 /**
  * This is the primary router for your server.