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

Fastifyの使用方法

非公式ベータ版翻訳

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

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

Fastifyアダプターを使い始める最良の方法は、サンプルアプリケーションを参照することです。

DescriptionLinks
  • Fastify server with WebSocket
  • Simple tRPC client in node

FastifyでtRPCを使用する方法​

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

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

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

ルーターの作成​

まず最初に、クエリ、ミューテーション、サブスクリプションを処理するためのルーターが必要です。

サンプルルーターを以下に示します。router.tsというファイル名で保存してください。

router.ts
router.ts
ts
import * as trpc from '@trpc/server';
import { z } from 'zod';
type User = {
  id: string;
  name: string;
  bio?: string;
};
const users: Record<string, User> = {};
export const appRouter = trpc
  .router()
  .query('getUserById', {
    input: z.string(),
    async resolve({ input }) {
      return users[input]; // input type is string
    },
  })
  .mutation('createUser', {
    // validate input with Zod
    input: z.object({
      name: z.string().min(3),
      bio: z.string().max(142).optional(),
    }),
    async resolve({ input }) {
      const id = Date.now().toString();
      const user: User = { id, ...input };
      users[user.id] = user;
      return user;
    },
  });
// export type definition of API
export type AppRouter = typeof appRouter;
router.ts
ts
import * as trpc from '@trpc/server';
import { z } from 'zod';
type User = {
  id: string;
  name: string;
  bio?: string;
};
const users: Record<string, User> = {};
export const appRouter = trpc
  .router()
  .query('getUserById', {
    input: z.string(),
    async resolve({ input }) {
      return users[input]; // input type is string
    },
  })
  .mutation('createUser', {
    // validate input with Zod
    input: z.object({
      name: z.string().min(3),
      bio: z.string().max(142).optional(),
    }),
    async resolve({ input }) {
      const id = Date.now().toString();
      const user: User = { id, ...input };
      users[user.id] = user;
      return user;
    },
  });
// export type definition of API
export type AppRouter = typeof appRouter;

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

コンテキストの作成​

次に、各リクエストごとに作成されるコンテキストが必要です。

サンプルコンテキストを以下に示します。context.tsというファイル名で保存してください：

context.ts
context.ts
ts
import { inferAsyncReturnType } from '@trpc/server';
import { CreateFastifyContextOptions } from '@trpc/server/adapters/fastify';
export function createContext({ req, res }: CreateFastifyContextOptions) {
  const user = { name: req.headers.username ?? 'anonymous' };
  return { req, res, user };
}
export type Context = inferAsyncReturnType<typeof createContext>;
context.ts
ts
import { inferAsyncReturnType } from '@trpc/server';
import { CreateFastifyContextOptions } from '@trpc/server/adapters/fastify';
export function createContext({ req, res }: CreateFastifyContextOptions) {
  const user = { name: req.headers.username ?? 'anonymous' };
  return { req, res, user };
}
export type Context = inferAsyncReturnType<typeof createContext>;

Fastifyサーバーの作成​

tRPCには最初からFastify用のアダプターが含まれています。このアダプターを使用すると、tRPCルーターをFastifyプラグインに変換できます。大きなバッチリクエスト中にエラーが発生しないようにするには、後述のようにmaxParamLength Fastifyオプションを適切な値に設定してください。

server.ts
ts
import { fastifyTRPCPlugin } from '@trpc/server/adapters/fastify';
import fastify from 'fastify';
import { createContext } from './context';
import { appRouter } from './router';
const server = fastify({
  maxParamLength: 5000,
});
server.register(fastifyTRPCPlugin, {
  prefix: '/trpc',
  trpcOptions: { router: appRouter, createContext },
});
(async () => {
  try {
    await server.listen({ port: 3000 });
  } catch (err) {
    server.log.error(err);
    process.exit(1);
  }
})();
server.ts
ts
import { fastifyTRPCPlugin } from '@trpc/server/adapters/fastify';
import fastify from 'fastify';
import { createContext } from './context';
import { appRouter } from './router';
const server = fastify({
  maxParamLength: 5000,
});
server.register(fastifyTRPCPlugin, {
  prefix: '/trpc',
  trpcOptions: { router: appRouter, createContext },
});
(async () => {
  try {
    await server.listen({ port: 3000 });
  } catch (err) {
    server.log.error(err);
    process.exit(1);
  }
})();

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

EndpointHTTP URI
getUserGET http://localhost:3000/trpc/getUserById?input=INPUT

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

with req.body of type User

サブスクリプション (WebSocket) の有効化方法​

Fastifyアダプターは、@fastify/websocketプラグインを介してサブスクリプションをサポートしています。上記の手順に加えて行う必要があるのは、依存関係をインストールし、ルーターにサブスクリプションを追加し、プラグインのuseWSSオプションを有効化することだけです。@fastify/websocketに必要なFastifyの最小バージョンは3.11.0です。

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

bash
yarn add @fastify/websocket
bash
yarn add @fastify/websocket

@fastify/websocketのインポートと登録​

ts
import ws from '@fastify/websocket';
server.register(ws);
ts
import ws from '@fastify/websocket';
server.register(ws);

サブスクリプションの追加​

前の手順で作成したrouter.tsファイルを編集し、次のコードを追加します：

router.ts
ts
export const appRouter = trpc
  .router()
  // .query(...)
  // .mutation(...)
  .subscription('randomNumber', {
    resolve() {
      return new Subscription<{ randomNumber: number }>((emit) => {
        const timer = setInterval(() => {
          emit.data({ randomNumber: Math.random() });
        }, 1000);
        return () => {
          clearInterval(timer);
        };
      });
    },
  });
router.ts
ts
export const appRouter = trpc
  .router()
  // .query(...)
  // .mutation(...)
  .subscription('randomNumber', {
    resolve() {
      return new Subscription<{ randomNumber: number }>((emit) => {
        const timer = setInterval(() => {
          emit.data({ randomNumber: Math.random() });
        }, 1000);
        return () => {
          clearInterval(timer);
        };
      });
    },
  });

useWSSオプションの有効化​

server.ts
ts
server.register(fastifyTRPCPlugin, {
  useWSS: true,
  // ...
});
server.ts
ts
server.register(fastifyTRPCPlugin, {
  useWSS: true,
  // ...
});

これで準備完了です。randomNumberトピックを購読すると、毎秒ランダムな数値を受け取れるはずです 🚀。

Fastifyプラグインオプション​

nametypeoptionaldefaultdescription
prefixstringtrue"/trpc"
useWSSbooleantruefalse
trpcOptionsNodeHTTPHandlerOptionsfalsen/a