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 même fichier peut devenir peu pratique. Il est facile de fusionner des routeurs ensemble afin de les diviser.

Fusion avec des routeurs enfants

routers/user.ts
ts
import { router, publicProcedure } from '../trpc';
import { z } from 'zod';
 
export const userRouter = router({
  list: publicProcedure.query(() => {
    // [..]
    return [];
  }),
});

routers/user.ts
ts
import { router, publicProcedure } from '../trpc';
import { z } from 'zod';
 
export const userRouter = router({
  list: publicProcedure.query(() => {
    // [..]
    return [];
  }),
});

routers/post.ts
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;
      // [...]
    }),
  list: publicProcedure.query(() => {
    // ...
    return [];
  }),
});

routers/post.ts
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;
      // [...]
    }),
  list: publicProcedure.query(() => {
    // ...
    return [];
  }),
});

routers/_app.ts
ts
import { router } from '../trpc';
 
import { userRouter } from './user';
import { postRouter } from './post';
 
const appRouter = router({
  user: userRouter,
  post: postRouter,
});
 
appRouter.user
           
(property) user: DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: never[];
        meta: object;
    }>;
}>
 
appRouter.post
           
(property) post: DecorateCreateRouterOptions<{
    create: MutationProcedure<{
        input: {
            title: string;
        };
        output: void;
        meta: object;
    }>;
    list: QueryProcedure<{
        input: void;
        output: never[];
        meta: object;
    }>;
}>
 
export type AppRouter = typeof appRouter;

routers/_app.ts
ts
import { router } from '../trpc';
 
import { userRouter } from './user';
import { postRouter } from './post';
 
const appRouter = router({
  user: userRouter,
  post: postRouter,
});
 
appRouter.user
           
(property) user: DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: never[];
        meta: object;
    }>;
}>
 
appRouter.post
           
(property) post: DecorateCreateRouterOptions<{
    create: MutationProcedure<{
        input: {
            title: string;
        };
        output: void;
        meta: object;
    }>;
    list: QueryProcedure<{
        input: void;
        output: never[];
        meta: object;
    }>;
}>
 
export type AppRouter = typeof appRouter;

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.

routers/user.ts
ts
import { router, publicProcedure } from '../trpc';
import { z } from 'zod';
 
export const userRouter = router({
  userList: publicProcedure.query(() => {
    // [..]
    return [];
  }),
});

routers/user.ts
ts
import { router, publicProcedure } from '../trpc';
import { z } from 'zod';
 
export const userRouter = router({
  userList: publicProcedure.query(() => {
    // [..]
    return [];
  }),
});

routers/post.ts
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;
      // [...]
    }),
  postList: publicProcedure.query(() => {
    // ...
    return [];
  }),
});

routers/post.ts
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;
      // [...]
    }),
  postList: publicProcedure.query(() => {
    // ...
    return [];
  }),
});

routers/_app.ts
ts
import { mergeRouters } from '../trpc';
 
import { userRouter } from './user';
import { postRouter } from './post';
 
const appRouter = mergeRouters(userRouter, postRouter);
         
const appRouter: BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    postCreate: MutationProcedure<{
        input: {
            title: string;
        };
        output: void;
        meta: object;
    }>;
    postList: QueryProcedure<{
        input: void;
        output: never[];
        meta: object;
    }>;
}> & DecorateCreateRouterOptions<{
    userList: QueryProcedure<{
        input: void;
        output: never[];
        meta: object;
    }>;
}>>
 
export type AppRouter = typeof appRouter;

routers/_app.ts
ts
import { mergeRouters } from '../trpc';
 
import { userRouter } from './user';
import { postRouter } from './post';
 
const appRouter = mergeRouters(userRouter, postRouter);
         
const appRouter: BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    postCreate: MutationProcedure<{
        input: {
            title: string;
        };
        output: void;
        meta: object;
    }>;
    postList: QueryProcedure<{
        input: void;
        output: never[];
        meta: object;
    }>;
}> & DecorateCreateRouterOptions<{
    userList: QueryProcedure<{
        input: void;
        output: never[];
        meta: object;
    }>;
}>>
 
export type AppRouter = typeof appRouter;

Chargement dynamique de routeurs

Vous pouvez utiliser la fonction lazy pour charger dynamiquement vos routeurs. Cela peut être utile pour réduire les démarrages à froid de votre application. Il n'y a aucune différence dans la manière dont vous utilisez le routeur après son chargement paresseux par rapport à un routeur normal.

routers/greeting.ts
ts
import { router, publicProcedure } from '../trpc';
 
export const greetingRouter = router({
  hello: publicProcedure.query(() => 'world'),
});

routers/greeting.ts
ts
import { router, publicProcedure } from '../trpc';
 
export const greetingRouter = router({
  hello: publicProcedure.query(() => 'world'),
});

routers/user.ts
ts
import { router, publicProcedure } from '../trpc';
 
export const userRouter = router({
  list: publicProcedure.query(() => ['John', 'Jane', 'Jim']),
});

routers/user.ts
ts
import { router, publicProcedure } from '../trpc';
 
export const userRouter = router({
  list: publicProcedure.query(() => ['John', 'Jane', 'Jim']),
});

routers/_app.ts
ts
import { lazy } from '@trpc/server';
import { router } from '../trpc';
 
export const appRouter = router({
  // Option 1: Short-hand when the module has exactly 1 router exported
  greeting: lazy(() => import('./greeting.js')),
  // Option 2: if exporting more than 1 router
  user: lazy(() => import('./user.js').then((m) => m.userRouter)),
});
export type AppRouter = typeof appRouter;

routers/_app.ts
ts
import { lazy } from '@trpc/server';
import { router } from '../trpc';
 
export const appRouter = router({
  // Option 1: Short-hand when the module has exactly 1 router exported
  greeting: lazy(() => import('./greeting.js')),
  // Option 2: if exporting more than 1 router
  user: lazy(() => import('./user.js').then((m) => m.userRouter)),
});
export type AppRouter = typeof appRouter;