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

Expressアダプター

非公式ベータ版翻訳

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

サンプルアプリケーション​

DescriptionLinks
Express server & procedure calls with Node.js.

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

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

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

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

AIエージェント

AIコーディングエージェントを使用している場合は、コード生成の品質向上のためにtRPCスキルをインストールしてください：

bash
npx @tanstack/intent@latest install
bash
npx @tanstack/intent@latest install

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 { id: '1', ...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 { id: '1', ...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経由で利用可能になりました！

EndpointHTTP URI
getUserGET http://localhost:4000/trpc/getUser?input=INPUT

where INPUT is a URI-encoded JSON string.
createUserPOST http://localhost:4000/trpc/createUser

with req.body of type {name: string}