メインコンテンツへスキップ
バージョン: 11.x

ルーターのマージ

非公式ベータ版翻訳

このページは PageTurner AI で翻訳されました（ベータ版）。プロジェクト公式の承認はありません。 エラーを見つけましたか？ 問題を報告 →

すべてのAPIコードを同じファイルに記述すると管理が煩雑になることがあります。ルーターを分割して整理するには、複数のルーターを簡単にマージできます。

子ルーターとのマージ​

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;

t.mergeRouters によるマージ​

すべてのプロシージャを単一のフラットな名前空間で管理したい場合、代わりに t.mergeRouters を使用できます

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;

ルーターの動的読み込み​

lazy関数を使用してルーターを動的に読み込むことが可能です。これはアプリケーションのコールドスタート時間を短縮するのに有効です。遅延読み込みされたルーターの使用方法は、通常のルーターと同様に操作でき、差異はありません。

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;