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

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

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

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

tsc

just fine.

Setting up tRPC without breaking Frontend's typechecking

// 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

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

tsc

tsc

tsc

tsc

tsc

just fine.

Setting up tRPC without breaking Frontend's typechecking

Similar Threads

Setting up tRPC without breaking Frontend's typechecking

Similar Threads

Similar Threads

Similar Threads