Version : 11.x

Fusion de routeurs

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Écrire tout le code d'API dans un seul fichier n'est pas idéal. Heureusement, fusionner des routeurs avec d'autres routeurs est très simple.

Définition d'un sous-routeur en ligne

Lorsque vous définissez un sous-routeur en ligne, vous pouvez représenter votre routeur comme un objet simple.

Dans l'exemple ci-dessous, nested1 et nested2 sont équivalents :

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(() => '...'),
  }),
});

Fusion avec des routeurs enfants

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 [];
  }),
});

Fusion avec `t.mergeRouters`

Si vous préférez avoir toutes vos procédures dans un seul espace de noms plat, vous pouvez utiliser t.mergeRouters à la place.

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 [];
  }),
});

Chargement dynamique de routeurs

Vous pouvez utiliser la fonction lazy pour charger dynamiquement vos routeurs. Cela peut aider à réduire les temps de démarrage à froid de votre application.

Aucune différence n'existe dans l'utilisation du routeur après un chargement différé comparé à un routeur normal.

Exemple de code pour le chargement différé d'un routeur :

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']),
});

Définition d'un sous-routeur en ligne​

Fusion avec des routeurs enfants​

Fusion avec t.mergeRouters​

Chargement dynamique de routeurs​

Définition d'un sous-routeur en ligne

Fusion avec des routeurs enfants

Fusion avec `t.mergeRouters`

Chargement dynamique de routeurs