Merging Routers

Writing all API-code in your code in the same file is not a great idea. It's easy to merge routers with other routers.

Thanks to TypeScript 4.1 template literal types we can also prefix the procedures without breaking typesafety.

Working example

• Code at /examples/next-prisma-starter/src/server/routers/app.ts
• All code for posts living in a separate router and namespaced with post.

Example code

server.ts
ts
const createRouter = () => {
  return trpc.router<Context>();
}
const posts = createRouter()
  .mutation('create', {
    input: z.object({
      title: z.string(),
    }),
    resolve: ({ input }) => {
      // ..
      return {
        id: 'xxxx',
        ...input,
      }
    },
  })
  .query('list', {
    resolve() {
      // ..
      return []
    }
  });
const users = createRouter()
  .query('list', {
    resolve() {
      // ..
      return []
    }
  });
const appRouter = createRouter()
  .merge('user.', users) // prefix user procedures with "user."
  .merge('post.', posts) // prefix post procedures with "post."
  ;

server.ts
ts
const createRouter = () => {
  return trpc.router<Context>();
}
const posts = createRouter()
  .mutation('create', {
    input: z.object({
      title: z.string(),
    }),
    resolve: ({ input }) => {
      // ..
      return {
        id: 'xxxx',
        ...input,
      }
    },
  })
  .query('list', {
    resolve() {
      // ..
      return []
    }
  });
const users = createRouter()
  .query('list', {
    resolve() {
      // ..
      return []
    }
  });
const appRouter = createRouter()
  .merge('user.', users) // prefix user procedures with "user."
  .merge('post.', posts) // prefix post procedures with "post."
  ;