Express.js での使用方法

非公式ベータ版翻訳

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

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

Description	URL	Links
Express server & procedure calls with node.js.	n/a	CodeSandbox Source

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

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

bash
yarn add @trpc/server zod

bash
yarn add @trpc/server zod

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

2. tRPCルーターの作成

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

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

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

ルーターファイルが大きくなりすぎた場合は、ルーターを複数のサブルーターに分割し、それぞれを独自のファイルに実装します。その後、それらをマージして単一のルートappRouterにします。

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

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

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

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

これでエンドポイントがHTTP経由で利用可能になりました！

Endpoint	HTTP URI
getUser	GET http://localhost:4000/trpc/getUser?input=INPUT where INPUT is a URI-encoded JSON string.
createUser	POST http://localhost:4000/trpc/createUser with req.body of type {name: string}