Chapter 07

tRPC Routers, ルーティングファイルの分割

knaka Tech-Blog

2023.03.05に更新

このチャプターの目次

概要:
1. 構成
2. 参考のコード

概要:

tRPC ルーティングファイルの分割になります。

エンドポイントが増えた時に、ファイルを追加して。ルーティングする例です

構成

trpc/server : 10.13.2
express : 4.18.2

参考のコード

分割方法

src/trpc.ts
router, publicProcedure export しておきます。

trpc.ts

import { initTRPC } from '@trpc/server';
const t = initTRPC.create();
 
 
export const middleware = t.middleware;
export const router = t.router;
export const publicProcedure = t.procedure;

src/index.ts

index.ts

import express from 'express';
import * as trpcExpress from '@trpc/server/adapters/express';
import cors from 'cors';
import { z } from 'zod';
//
import {taskRouter} from './routes/tasks'
import {userRouter} from './routes/users'
//
const app = express();
const PORT = 3000;
app.use(cors());

import { router, publicProcedure } from './trpc';
//type
interface User {
  id: string;
  name: string;
}
const userList: User[] = [
  {
    id: '1',
    name: 'User_1st',
  },
];
//
const appRouter = router({
  hello: publicProcedure.query(() => {
    return 'Hello World-111';
  }),
  task: taskRouter,   
  user: userRouter,   
});
//
app.get('/', (_req, res) => res.send('hello'));
app.use(
  '/trpc',
  trpcExpress.createExpressMiddleware({
    router: appRouter,
  })
);
app.listen(PORT, () => console.log(`Example app listening on port ${PORT}!`));

export type AppRouter = typeof appRouter;

routes folderに、分割ルーティングファイルおきます
routes/tasks.ts
taskRouter 名前で、上記のindex.ts /appRouter に読込ます

tasks.ts

import { z } from 'zod';
import { router, publicProcedure } from '../trpc';
//
import LibTask from '../lib/LibTask';

//type
//
export const taskRouter = router({
  hello: publicProcedure.query(() => { return 'Hello World-444';}),  
});

追加されたパスは、下記

http://localhost:3000/trpc/task.hello

....

概要:

構成

参考のコード

関連

分割方法