Versión: 11.x

Combinación de Routers

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Escribir todo el código de la API en un mismo archivo no es una buena idea. Es fácil combinar routers con otros routers.

Definición de un sub-router en línea

Al definir un sub-router en línea, puedes representar tu router como un objeto simple.

En el siguiente ejemplo, nested1 y nested2 son equivalentes:

server/_app.ts
ts
import * as trpc from '@trpc/server';
import { publicProcedure, router } from './trpc';
 
const appRouter = router({
  // Shorthand plain object for creating a sub-router
  nested1: {
    proc: publicProcedure.query(() => '...'),
  },
  // Equivalent of:
  nested2: router({
    proc : publicProcedure.query(() => '...'),
  }),
});

server/_app.ts
ts
import * as trpc from '@trpc/server';
import { publicProcedure, router } from './trpc';
 
const appRouter = router({
  // Shorthand plain object for creating a sub-router
  nested1: {
    proc: publicProcedure.query(() => '...'),
  },
  // Equivalent of:
  nested2: router({
    proc : publicProcedure.query(() => '...'),
  }),
});

Combinación con routers hijos

server.ts
ts
// @filename: trpc.ts
import { initTRPC } from '@trpc/server';
const t = initTRPC.create();
 
 
 
export const router = t.router;
export const publicProcedure = t.procedure;
 
// @filename: routers/_app.ts
import { router } from '../trpc';
import { z } from 'zod';
 
import { userRouter } from './user';
import { postRouter } from './post';
 
const appRouter = router({
  user: userRouter, // put procedures under "user" namespace
  post: postRouter, // put procedures under "post" namespace
});
 
// You can then access the merged route with
// http://localhost:3000/trpc/<NAMESPACE>.<PROCEDURE>
 
export type AppRouter = typeof appRouter;
 
 
// @filename: routers/post.ts
import { router, publicProcedure } from '../trpc';
import { z } from 'zod';
export const postRouter = router({
  create: publicProcedure
    .input(
      z.object({
        title: z.string(),
      }),
    )
    .mutation((opts) => {
      const { input } = opts;
               const input: {
    title: string;
}
      // [...]
    }),
  list: publicProcedure.query(() => {
    // ...
    return [];
  }),
});
 
// @filename: routers/user.ts
import { router, publicProcedure } from '../trpc';
import { z } from 'zod';
export const userRouter = router({
  list: publicProcedure.query(() => {
    // [..]
    return [];
  }),
});

server.ts
ts
// @filename: trpc.ts
import { initTRPC } from '@trpc/server';
const t = initTRPC.create();
 
 
 
export const router = t.router;
export const publicProcedure = t.procedure;
 
// @filename: routers/_app.ts
import { router } from '../trpc';
import { z } from 'zod';
 
import { userRouter } from './user';
import { postRouter } from './post';
 
const appRouter = router({
  user: userRouter, // put procedures under "user" namespace
  post: postRouter, // put procedures under "post" namespace
});
 
// You can then access the merged route with
// http://localhost:3000/trpc/<NAMESPACE>.<PROCEDURE>
 
export type AppRouter = typeof appRouter;
 
 
// @filename: routers/post.ts
import { router, publicProcedure } from '../trpc';
import { z } from 'zod';
export const postRouter = router({
  create: publicProcedure
    .input(
      z.object({
        title: z.string(),
      }),
    )
    .mutation((opts) => {
      const { input } = opts;
               const input: {
    title: string;
}
      // [...]
    }),
  list: publicProcedure.query(() => {
    // ...
    return [];
  }),
});
 
// @filename: routers/user.ts
import { router, publicProcedure } from '../trpc';
import { z } from 'zod';
export const userRouter = router({
  list: publicProcedure.query(() => {
    // [..]
    return [];
  }),
});

Combinación con `t.mergeRouters`

Si prefieres tener todos los procedimientos en un único espacio de nombres plano, puedes usar t.mergeRouters

server.ts
ts
// @filename: trpc.ts
import { initTRPC } from '@trpc/server';
const t = initTRPC.create();
 
 
export const router = t.router;
export const publicProcedure = t.procedure;
export const mergeRouters = t.mergeRouters;
 
// @filename: routers/_app.ts
import { router, publicProcedure, mergeRouters } from '../trpc';
import { z } from 'zod';
 
import { userRouter } from './user';
import { postRouter } from './post';
 
const appRouter = mergeRouters(userRouter, postRouter)
 
export type AppRouter = typeof appRouter;
 
// @filename: routers/post.ts
import { router, publicProcedure } from '../trpc';
import { z } from 'zod';
export const postRouter = router({
  postCreate: publicProcedure
    .input(
      z.object({
        title: z.string(),
      }),
    )
    .mutation((opts) => {
      const { input } = opts;
               const input: {
    title: string;
}
      // [...]
    }),
  postList: publicProcedure.query(() => {
    // ...
    return [];
  }),
});
 
 
// @filename: routers/user.ts
import { router, publicProcedure } from '../trpc';
import { z } from 'zod';
export const userRouter = router({
  userList: publicProcedure.query(() => {
    // [..]
    return [];
  }),
});

server.ts
ts
// @filename: trpc.ts
import { initTRPC } from '@trpc/server';
const t = initTRPC.create();
 
 
export const router = t.router;
export const publicProcedure = t.procedure;
export const mergeRouters = t.mergeRouters;
 
// @filename: routers/_app.ts
import { router, publicProcedure, mergeRouters } from '../trpc';
import { z } from 'zod';
 
import { userRouter } from './user';
import { postRouter } from './post';
 
const appRouter = mergeRouters(userRouter, postRouter)
 
export type AppRouter = typeof appRouter;
 
// @filename: routers/post.ts
import { router, publicProcedure } from '../trpc';
import { z } from 'zod';
export const postRouter = router({
  postCreate: publicProcedure
    .input(
      z.object({
        title: z.string(),
      }),
    )
    .mutation((opts) => {
      const { input } = opts;
               const input: {
    title: string;
}
      // [...]
    }),
  postList: publicProcedure.query(() => {
    // ...
    return [];
  }),
});
 
 
// @filename: routers/user.ts
import { router, publicProcedure } from '../trpc';
import { z } from 'zod';
export const userRouter = router({
  userList: publicProcedure.query(() => {
    // [..]
    return [];
  }),
});

Carga dinámica de routers

Puedes usar la función lazy para cargar routers dinámicamente. Esto puede ayudar a reducir los tiempos de arranque en frío de tu aplicación.

No hay diferencia en cómo usas el router después de ser cargado dinámicamente versus un router normal.

Código de ejemplo para carga dinámica de un router:

ts
// @filename: routers/_app.ts
import { lazy } from '@trpc/server';
import { router } from '../trpc';
 
export const appRouter = router({
  // Option 1: Short-hand lazy load the greeting router if you have exactly 1 export and it is the router
  greeting: lazy(() => import('./greeting.js')),
  // Option 2: Alternative way to lazy load if you have more than 1 export
  user: lazy(() => import('./user.js').then((m) => m.userRouter)),
});
export type AppRouter = typeof appRouter;
 
// ----------------------------------------------------
// @filename: routers/greeting.ts
import { router, publicProcedure } from '../trpc';
export const greetingRouter = router({
  hello: publicProcedure.query(() => 'world'),
});
 
// ----------------------------------------------------
// @filename: routers/user.ts
import { router, publicProcedure } from '../trpc';
 
export const userRouter = router({
  list: publicProcedure.query(() => ['John', 'Jane', 'Jim']),
});

ts
// @filename: routers/_app.ts
import { lazy } from '@trpc/server';
import { router } from '../trpc';
 
export const appRouter = router({
  // Option 1: Short-hand lazy load the greeting router if you have exactly 1 export and it is the router
  greeting: lazy(() => import('./greeting.js')),
  // Option 2: Alternative way to lazy load if you have more than 1 export
  user: lazy(() => import('./user.js').then((m) => m.userRouter)),
});
export type AppRouter = typeof appRouter;
 
// ----------------------------------------------------
// @filename: routers/greeting.ts
import { router, publicProcedure } from '../trpc';
export const greetingRouter = router({
  hello: publicProcedure.query(() => 'world'),
});
 
// ----------------------------------------------------
// @filename: routers/user.ts
import { router, publicProcedure } from '../trpc';
 
export const userRouter = router({
  list: publicProcedure.query(() => ['John', 'Jane', 'Jim']),
});

Definición de un sub-router en línea​

Combinación con routers hijos​

Combinación con t.mergeRouters​

Carga dinámica de routers​

Definición de un sub-router en línea

Combinación con routers hijos

Combinación con `t.mergeRouters`

Carga dinámica de routers