tRPCのドキュメント生成trpc-panel紹介

tRPCのドキュメント生成

本記事の対象者

• tRPCを使っていてI/Fのドキュメントを作りたいと考えている人

tRPCとは

tRPCとは、フルスタックのTypeScript開発者向けのフレームワークです。
APIエンドポイントを静的に型付けし、クライアント・サーバ間で共有することが可能です。

trpc-panelとは

Swagger UIのようにI/Fのドキュメントを表示できます
tRPCバックエンドを手動でテストするためのUIを、オーバーヘッドなしで自動的に生成します

準備

tRPCのセットアップ(Next.js)

create next-app実行後に以下のリンクに従ってファイルを作成していくだけ

trpc-panelのインストール

yarn add trpc-panel

trpc-panelの設定

server/trpc.ts

import { initTRPC } from "@trpc/server";
import { TRPCPanelMeta } from "trpc-panel";

const t = initTRPC.meta<TRPCPanelMeta>().create();
export const router = t.router;
export const procedure = t.procedure;

• describeでパラメータの説明追記

server/routers/_app.ts

import { z } from 'zod';
import { procedure, router } from '../trpc';
export const appRouter = router({
  hello: procedure
    .input(
      z.object({
        text: z.string().describe("The name to say hello too."),
      }),
    )
    .query((opts) => {
      return {
        greeting: `hello ${opts.input.text}`,
      };
    }),
});
// export type definition of API
export type AppRouter = typeof appRouter;

pages/api/panel.ts

import { appRouter } from '@/server/routers/_app';
import type { NextApiRequest, NextApiResponse } from 'next';
import { renderTrpcPanel } from 'trpc-panel';

export default async function handler(_: NextApiRequest, res: NextApiResponse) {
    if (process.env.NODE_ENV === 'development') {
        return res.status(200).send(renderTrpcPanel(appRouter, {
            url: 'http://localhost:3000/api/trpc',
        }));
    }
    return res.status(404);
}

起動して動作確認

http://localhost:3000/api/panel

リクエストを送ってみる

QUERY > hello のinputに文字を入力してExecute
→ Responseが表示される