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 AppRouterAppRouter:

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 tsctsc 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 tsctsc 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 tsctsc 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 AppRouterAppRouter:

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>();

Setting up tRPC without breaking Frontend's typechecking

Setting up tRPC without breaking Frontend's typechecking

Continue the conversation

tRPC

Continue the conversation

tRPC

Similar Threads