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

Express アダプター

サンプルアプリ​

説明リンク
Node.js を使用した Express サーバーとプロシージャコール。

既存の Express プロジェクトに tRPC を追加する方法​

1. 依存関係のインストール​

bash
yarn add @trpc/server zod
bash
yarn add @trpc/server zod

Zod は必須の依存関係ではありませんが、以下のサンプルルーターで使用されています。

2. tRPC ルーターの作成​

tRPC ルーターを実装します。サンプルルーターを以下に示します。

server.ts
ts
import { initTRPC } from '@trpc/server';
import { z } from 'zod';
export const t = initTRPC.create();
export const appRouter = t.router({
  getUser: t.procedure.input(z.string()).query((opts) => {
    opts.input; // string
    return { id: opts.input, name: 'Bilbo' };
  }),
  createUser: t.procedure
    .input(z.object({ name: z.string().min(5) }))
    .mutation(async (opts) => {
      // use your ORM of choice
      return await UserModel.create({
        data: opts.input,
      });
    }),
});
// export type definition of API
export type AppRouter = typeof appRouter;
server.ts
ts
import { initTRPC } from '@trpc/server';
import { z } from 'zod';
export const t = initTRPC.create();
export const appRouter = t.router({
  getUser: t.procedure.input(z.string()).query((opts) => {
    opts.input; // string
    return { id: opts.input, name: 'Bilbo' };
  }),
  createUser: t.procedure
    .input(z.object({ name: z.string().min(5) }))
    .mutation(async (opts) => {
      // use your ORM of choice
      return await UserModel.create({
        data: opts.input,
      });
    }),
});
// export type definition of API
export type AppRouter = typeof appRouter;

ルーターファイルが大きくなりすぎたら、各ファイルを個別に実装した複数のサブルーターに分割します。次に、それらをマージして単一のルートappRouterを作成します。

3. Express アダプターの使用​

tRPC には、すぐに使用できる Express 用のアダプターが含まれています。このアダプターを使用すると、tRPC ルーターを Express ミドルウェアに変換できます。

server.ts
ts
import { initTRPC } from '@trpc/server';
import * as trpcExpress from '@trpc/server/adapters/express';
import express from 'express';
// created for each request
const createContext = ({
  req,
  res,
}: trpcExpress.CreateExpressContextOptions) => ({}); // no context
type Context = Awaited<ReturnType<typeof createContext>>;
const t = initTRPC.context<Context>().create();
const appRouter = t.router({
  // [...]
});
const app = express();
app.use(
  '/trpc',
  trpcExpress.createExpressMiddleware({
    router: appRouter,
    createContext,
  }),
);
app.listen(4000);
server.ts
ts
import { initTRPC } from '@trpc/server';
import * as trpcExpress from '@trpc/server/adapters/express';
import express from 'express';
// created for each request
const createContext = ({
  req,
  res,
}: trpcExpress.CreateExpressContextOptions) => ({}); // no context
type Context = Awaited<ReturnType<typeof createContext>>;
const t = initTRPC.context<Context>().create();
const appRouter = t.router({
  // [...]
});
const app = express();
app.use(
  '/trpc',
  trpcExpress.createExpressMiddleware({
    router: appRouter,
    createContext,
  }),
);
app.listen(4000);

これで、エンドポイントを HTTP で使用できるようになりました！

エンドポイントHTTP URI
getUserGET http://localhost:4000/trpc/getUser?input=INPUT

ここで、INPUT は URI エンコードされた JSON 文字列です。
createUserPOST http://localhost:4000/trpc/createUser

{name: string}型のreq.bodyを使用します。