how can I implement TRPC when my client and server are deployed in separate repositories?

[virusxd521]

I would like to implement TRPC in my React application.
My application is a bit old and using a pretty straight forward React and node.js app and but I'm struggling with integrating TRPC into my application since the FE and the BE are deployed to separate repos and I have a problem to share the Router type.
Any one did something similar and can share? any advice?

[iamclaytonray]

@repo/api

import { t } from '../trpc.js';
import { adminRouter } from './admin/index.js';
import { coreRouter } from './core/index.js';

export const appRouter = t.router({
  admin: adminRouter,
  core: coreRouter,
});

export type AppRouter = typeof appRouter;

@repo/typings

import type { AppRouter } from '@repo/api/src/procedures/router';

export { AppRouter };

@repo/web

import type { AppRouter } from '@repo/typings';
import { createTRPCReact } from '@trpc/react-query';

export const trpc = createTRPCReact<AppRouter>();

[iamclaytonray]

A smarter way to do the above would be splitting the routers up too. That way, admin procedures can never be exposed to consumer-facing client apps. But that's my use case. You may not even need to consider that!

Other context:
My API is in a turborepo alongside a web app and admin app. However, my native app (React Native) is it's own repo. You do have to be careful with this approach (ie: proper versioning, etc) but as long as you are responsible, you shouldn't have many problems. In local dev, just use symlinks (you can find guides for whatever package manager you use) and for production, make sure to publish to a registry. I may follow up here at some point with my Github Actions that helps automate this (mine is currently broken a little).

---

I'm happy to help answer other questions you have too! Just respond here and I'll answer when I have some time :)