Schema Sharing with Fastify and Next.js

Fastify と Next.js でスキーマを共有する実装例

SetUp

• API

  • cd api && yarn && yarn dev

• Web

  • cd web && yarn && yarn generate && yarn dev

• DB

  • cd db && ./build.sh

API Docs

• http://localhost:3000/docs

実装方針

Web

• コンポーネントの中で API フェッチ を行わない。基本的に Recoil の selector 経由でデータを表示する

• openapi2aspida を使用して、API クライアントを作成してそのクライアント経由でデータを取得する

• Component ← Recoil Selector ← Openapi2aspida Client ← APIのような流れ

❯ cd web/src &&tree -L 3
.
├── components
│   ├── ErrorFallback.tsx
│   └── user
│       ├── User.tsx
│       └── UserInfo.tsx
├── lib
│   └── apiClient.ts
├── pages
│   ├── _app.tsx
│   ├── _document.tsx
│   ├── index.tsx
│   └── user.tsx
├── store
│   ├── recoilKeys.ts
│   └── user
│       └── userState.ts
└── utils
    └── array.ts

API

• modules フォルダの中で取得するリソースについて切り分ける

❯ cd api/src && tree -L 3
.
├── app.ts
├── index.ts
├── modules
│   ├── healthCheck
│   │   └── healthCheck.ts
│   └── user
│       ├── __test__
│       ├── user.domain.ts
│       ├── user.driver.ts
│       ├── user.gateway.ts
│       ├── user.handler.ts
│       ├── user.rest.ts
│       ├── user.schema.ts
│       └── user.usecase.ts
└── utils
    ├── db_pool.ts
    └── makeDoc.ts

• rest → handler → usecase -> gateway(実装中) → driver → DB

• スキーマ は.schema.tsファイルしてリソース毎にそこに集める

• handler は usecase を呼ぶだけ（handler のテストは無し）

• テストは Driver＆Gateway を Mock した テストを書いている。（全体 e2e は別の方法でテストしたい）

備考

• openapi からスキーマ自動生成は生成されるスキーマは.gitignoreに含めて、GitHub Actions とかで生成させた方が良い。
• ローカルで開発するときにyarn devコマンドの中にスキーマ生成コマンドを入れるとか

参考

• Build a REST API with Fastify & Prisma

• Fastify で作る API に Zod でスキーマバリデーションをかけながら型定義と実用レベルの OpenAPI 仕様を自動生成する