ConfusedCompiler
ConfusedCompiler•6h ago

Setting up tRPC without breaking Frontend's typechecking

Hello everyone, I would like to better understand how I can setup my project correctly. Right now I'm using Fastify with tRPC. My frontend is a React Native app. Both live in a monorepo using yarn workspaces. I'm exporting my tRPC types like this: 
// package.json
  "main": "dist/index.js",
  "types": "dist/types.d.ts",
  "exports": {
    "./trpc": "./src/types.ts"
  },
// package.json
  "main": "dist/index.js",
  "types": "dist/types.d.ts",
  "exports": {
    "./trpc": "./src/types.ts"
  },
In the backend I'm exporting my AppRouter: 
export type AppRouter = typeof appRouter;
export type AppRouter = typeof appRouter;
And I'm importing it like this: 
import { createTRPCReact } from "@trpc/react-query";
import type { AppRouter } from "@myrepo/api/trpc";

export const trpc = createTRPCReact<AppRouter>();
import { createTRPCReact } from "@trpc/react-query";
import type { AppRouter } from "@myrepo/api/trpc";

export const trpc = createTRPCReact<AppRouter>();
So while this instantly reflects any changes in the frontend, e.g. if I change a property of an input DTO, this breaks my typechecking. If I run tsc I'm getting errors from my backend code. The errors are primarily coming from - allegedly - missing properties related to my Drizzle schemas. Also I'm using path aliases in some backend files, which also produces an error when typechecking. I can potentially fix these by not using path aliases at all. If I run tsc in the backend everything is fine though, so I'm not sure if any of those errors (except the path aliases) make sense. What are my options here? My setup feels flawed. How do I set this up correctly? I can see that I can potentially export a transpiled type file for my backend API, but I would need to combine this with a watcher task to reflect changes in the frontend immediately. When testing this approach it was lagging behind my current approach, but it allowed me to perform typechecks using tsc just fine.
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?