Modernizing to tRPC v10

apps/expo/package.json

@@ -1,6 +1,6 @@
 {
   "main": "index.js",
-  "name": "@expo-next-monorepo-example/expo",
+  "name": "@zart/expo",
   "scripts": {
     "start": "react-native start",
     "start:expo": "expo start",
@@ -33,8 +33,8 @@
   "dependencies": {
     "@gorhom/bottom-sheet": "^4.0.0-alpha.30",
     "@sentry/react-native": "^2.6.2",
-    "@trpc/client": "^9.6.0",
-    "@trpc/react": "^9.6.0",
+    "@trpc/client": "^10.0.0-alpha.36",
+    "@trpc/react": "^10.0.0-alpha.36",
     "app": "*",
     "dripsy": "^2.3.6",
     "expo": "^42.0.0-beta.1",

apps/expo/utils/trpc.tsx

@@ -1 +1 @@
-export * from '@zart/react/trpc';
+export * from '@zart/react-native/trpc';

apps/nextjs/next.config.js

@@ -1,7 +1,8 @@
 /**
  * @link https://nextjs.org/docs/api-reference/next.config.js/introduction
+ * @type {import('next').NextConfig}
  */
-module.exports = {
+const nextConfig = {
   experimental: {
     externalDir: true,
     eslint: {
@@ -10,3 +11,5 @@ module.exports = {
     },
   },
 };
+
+module.exports = nextConfig;

apps/nextjs/package.json

@@ -19,10 +19,10 @@
   },
   "dependencies": {
     "@prisma/client": "^3.8.1",
-    "@trpc/client": "^9.6.0",
-    "@trpc/next": "^9.2.0",
-    "@trpc/react": "^9.6.0",
-    "@trpc/server": "^9.6.0",
+    "@trpc/client": "^10.0.0-alpha.36",
+    "@trpc/next": "^10.0.0-alpha.36",
+    "@trpc/react": "^10.0.0-alpha.36",
+    "@trpc/server": "^10.0.0-alpha.36",
     "clsx": "^1.1.1",
     "next": "^12.0.1",
     "prisma": "^3.8.1",

apps/nextjs/src/pages/index.tsx

@@ -5,11 +5,9 @@ import { trpc } from '../utils/trpc';
 
 export default function IndexPage() {
   const utils = trpc.useContext();
-  const postsQuery = trpc.useQuery(['post.all']);
-  const addPost = trpc.useMutation('post.add', {
-    onSettled() {
-      return utils.invalidateQuery(['post.all']);
-    },
+  const postsQuery = trpc.proxy.post.all.useQuery();
+  const addPost = trpc.proxy.post.add.useMutation({
+    onSuccess: () => utils.invalidateQueries('post.all'),
   });
 
   // prefetch all posts for instant navigation

apps/nextjs/src/pages/post/[id].tsx

@@ -1,10 +1,10 @@
 import { useRouter } from 'next/dist/client/router';
-import { trpc } from 'utils/trpc';
 import NextError from 'next/error';
+import { trpc } from 'utils/trpc';
 
 export default function PostViewPage() {
   const id = useRouter().query.id as string;
-  const postQuery = trpc.useQuery(['post.byId', id]);
+  const postQuery = trpc.proxy.post.byId.useQuery(id);
   if (postQuery.error) {
     const statusCode = postQuery.error.data?.httpStatus ?? 500;
     return (

package.json

@@ -8,11 +8,11 @@
     "db-up": "docker compose up -d",
     "db-nuke": "docker compose down --volumes --remove-orphans",
     "db-migrate-dev": "yarn prisma migrate dev",
-    "dev:nextjs": "yarn --cwd apps/nextjs dev",
-    "dev:expo": "yarn --cwd apps/expo dev",
+    "dev:nextjs": "turbo run dev --filter=@zart/nextjs",
+    "dev:expo": "turbo run dev --filter=@zart/expo",
     "lint": "eslint --ext \".js,.ts,.tsx\" --ignore-path .gitignore . && manypkg check",
     "lint-fix": "yarn lint --fix && manypkg fix",
-    "dev": "run-s db-up db-migrate-dev && run-p dev:* --print-label",
+    "dev": "turbo run dev",
     "clean": "find . -name node_modules -o -name .next -o -name .expo -type d -prune | xargs rm -rf",
     "prisma-dev": "prisma migrate dev && prisma generate",
     "postinstall": "prisma generate"
@@ -39,9 +39,9 @@
     "eslint-plugin-react": "^7.25.1",
     "eslint-plugin-react-hooks": "^4.2.0",
     "expo-yarn-workspaces": "^1.7.0",
-    "lerna": "^4.0.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.4.0",
-    "prisma": "^3.8.1"
+    "prisma": "^3.8.1",
+    "turbo": "^1.3.1"
   }
 }

packages/api/package.json

@@ -8,6 +8,9 @@
     "src"
   ],
   "scripts": {},
-  "dependencies": {},
+  "dependencies": {
+    "@trpc/react": "^10.0.0-alpha.36",
+    "@trpc/server": "^10.0.0-alpha.36"
+  },
   "devDependencies": {}
 }

packages/api/src/createRouter.ts

@@ -1,9 +1,19 @@
 import * as trpc from '@trpc/server';
+import superjson from 'superjson';
 import { Context } from './createContext';
 
 /**
  * Helper function to create a router with context
  */
-export function createRouter() {
-  return trpc.router<Context>();
-}
+export const t = trpc.initTRPC<{ ctx: Context }>()({
+  /**
+   * Add data transformers
+   * @link https://trpc.io/docs/data-transformers
+   */
+  transformer: superjson,
+  /**
+   * Optionally do custom error (type safe!) formatting
+   * @link https://trpc.io/docs/error-formatting
+   */
+  // errorFormatter: ({ shape, error }) => {},
+});

packages/api/src/routers/_app.ts

@@ -1,8 +1,7 @@
 /**
  * This file contains the root router of your tRPC-backend
  */
-import superjson from 'superjson';
-import { createRouter } from '../createRouter';
+import { t } from '../createRouter';
 import { postRouter } from './post';
 
 /**
@@ -11,17 +10,8 @@ import { postRouter } from './post';
  * @link https://trpc.io/docs/ssg
  * @link https://trpc.io/docs/router
  */
-export const appRouter = createRouter()
-  /**
-   * Add data transformers
-   * @link https://trpc.io/docs/data-transformers
-   */
-  .transformer(superjson)
-  /**
-   * Optionally do custom error (type safe!) formatting
-   * @link https://trpc.io/docs/error-formatting
-   */
-  // .formatError(({ shape, error }) => { })
-  .merge('post.', postRouter);
+export const appRouter = t.router({
+  post: postRouter,
+});
 
 export type AppRouter = typeof appRouter;

packages/api/src/routers/post.ts

@@ -3,79 +3,75 @@
  * This is an example router, you can delete this file and then update `../pages/api/trpc/[trpc].tsx`
  */
 
-import { createRouter } from '../createRouter';
-import { z } from 'zod';
 import { TRPCError } from '@trpc/server';
+import { z } from 'zod';
+import { t } from '../createRouter';
 
-export const postRouter = createRouter()
+export const postRouter = t.router({
   // create
-  .mutation('add', {
-    input: z.object({
-      id: z.string().uuid().optional(),
-      title: z.string().min(1).max(32),
-      text: z.string().min(1),
-    }),
-    async resolve({ ctx, input }) {
+  add: t.procedure
+    .input(
+      z.object({
+        id: z.string().uuid().optional(),
+        title: z.string().min(1).max(32),
+        text: z.string().min(1),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
       const todo = await ctx.prisma.post.create({
         data: input,
       });
       return todo;
-    },
-  })
+    }),
   // read
-  .query('all', {
-    async resolve({ ctx }) {
-      /**
-       * For pagination you can have a look at this docs site
-       * @link https://trpc.io/docs/useInfiniteQuery
-       */
-
-      return ctx.prisma.post.findMany({
-        select: {
-          id: true,
-          title: true,
-        },
-      });
-    },
-  })
-  .query('byId', {
-    input: z.string(),
-    async resolve({ ctx, input }) {
-      const post = await ctx.prisma.post.findUnique({
-        where: { id: input },
+  all: t.procedure.query(({ ctx }) => {
+    /**
+     * For pagination you can have a look at this docs site
+     * @link https://trpc.io/docs/useInfiniteQuery
+     */
+    return ctx.prisma.post.findMany({
+      select: {
+        id: true,
+        title: true,
+      },
+    });
+  }),
+  byId: t.procedure.input(z.string()).query(async ({ ctx, input }) => {
+    const post = await ctx.prisma.post.findUnique({
+      where: { id: input },
+    });
+    if (!post) {
+      throw new TRPCError({
+        code: 'NOT_FOUND',
+        message: `No post with id '${input}'`,
       });
-      if (!post) {
-        throw new TRPCError({
-          code: 'NOT_FOUND',
-          message: `No post with id '${input}'`,
-        });
-      }
-      return post;
-    },
-  })
+    }
+    return post;
+  }),
   // update
-  .mutation('edit', {
-    input: z.object({
-      id: z.string().uuid(),
-      data: z.object({
-        title: z.string().min(1).max(32).optional(),
-        text: z.string().min(1).optional(),
+  edit: t.procedure
+    .input(
+      z.object({
+        id: z.string().uuid(),
+        data: z.object({
+          title: z.string().min(1).max(32).optional(),
+          text: z.string().min(1).optional(),
+        }),
       }),
-    }),
-    async resolve({ ctx, input }) {
+    )
+    .mutation(async ({ ctx, input }) => {
       const { id, data } = input;
       const todo = await ctx.prisma.post.update({
         where: { id },
         data,
       });
       return todo;
-    },
-  })
+    }),
   // delete
-  .mutation('delete', {
-    input: z.string().uuid(),
-    async resolve({ input: id, ctx }) {
+  delete: t.procedure
+    .input(z.string().uuid())
+    .mutation(async ({ input: id, ctx }) => {
       await ctx.prisma.post.delete({ where: { id } });
       return id;
-    },
-  });
+    }),
+});

packages/react-native/package.json

@@ -5,7 +5,7 @@
   "scripts": {},
   "license": "MIT",
   "dependencies": {
-    "@trpc/react": "^9.6.0",
-    "@trpc/server": "^9.6.0"
+    "@trpc/react": "^10.0.0-alpha.36",
+    "@trpc/server": "^10.0.0-alpha.36"
   }
 }

packages/react/package.json

@@ -4,5 +4,8 @@
   "private": true,
   "scripts": {},
   "license": "MIT",
-  "dependencies": {}
+  "dependencies": {
+    "@trpc/react": "^10.0.0-alpha.36",
+    "@trpc/server": "^10.0.0-alpha.36"
+  }
 }