GraphQLスキーマからの自動生成 - フロントエンド開発体験の向上

tsukiji.graphql #2 LT で話した内容です。
https://tsukiji-graphql.connpass.com/event/298830/

Transcript

1. GraphQLスキーマからの自動生成 - フロン トエンド開発体験の向上 ＠hiramatsutaku 2023/11/16 tsukiji.graphql #2 https://tsukiji-graphql.connpass.com/event/298830/
2. 自己紹介 • Taku Hiramatsu • 京都在住、娘👭 • 趣味 ◦ サッカー、山登り、コードを書くこと • 職種 ◦ ソフトウェアエンジニア ▪ フロントエンドが主軸 • 経歴 ◦ 新卒で株式会社フリークアウト ◦ いくつかの新規事業に従事 ◦ 2020/6〜 株式会社カケハシ
3. 今日話すこと
4. 今日話すこと ここ数年、GraphQL を利用したプロダクトを複数開発してきました。 知見が溜まってきたので、フロントエンド観点で、開発体験を向上してくれる 「GraphQL スキーマから自動生成すると便利なもの」を共有したいと思います！ （TypeScript 前提です）
5. GraphQL スキーマからの自動生成
6. GraphQL スキーマからの自動生成 • client-preset • MSW モックハンドラ • GraphQL レスポンスのモックデータの factory 関数 • GraphQL API ドキュメント
7. client-preset • GraphQL Code Generator のプラグインの一つ ◦ フロントエンド開発に必要なプラグインの組み合わせ • TypedDocumentNode を生成（メジャーな GraphQL クライアントがサポート） ◦ これを用いて、型付けされた Graphql Operation（Query, Mutation, Subscription）を行う • Fragment Colocation を支援する fragment-masking の機能を提供 ref • https://the-guild.dev/graphql/codegen/plugins/presets/preset-client • https://zenn.dev/mh4gf/articles/graphql-codegen-client-preset
8. client-preset - 運用しての所感 • 新規プロダクトでは、client-preset は迷わず入れて良い ◦ fragment-masking の制約はフロントエンドをシンプルにする ▪ コンポーネントの props が GraphQL スキーマと対応するため • 既存プロダクトに fragment-masking を適用していくのはそれなりのコストがかかる ◦ 機能追加する部分から適用していく方針を取った • Operation、Fragment の命名規則を作っておくと良い
9. • client-preset • MSW モックハンドラ • GraphQL レスポンスのモックデータの factory 関数 • GraphQL API ドキュメント GraphQL スキーマからの自動生成
10. MSW モックハンドラ • 昨今のフロントエンド開発において、GraphQL API をモックしたい場合、MSW（Mock Service Worker）を活用 するケースが増えている • @graphql-codegen/typescript-msw を利用 ◦ GraphQL Code Generator のプラグインの一つ ◦ 型付けされた MSW モックハンドラの生成 ref • https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-msw
11. MSW モックハンドラ - ユースケース • バックエンドの実装を待たずにフロントエンド開発を進めたいケース ◦ GraphQL の場合、スキーマ駆動開発を採用することは多い ◦ フロントエンドとバックエンドの開発者が別の場合は有用 • Storybook + MSW（API リクエストするコンポーネントの Story） ◦ msw-storybook-addon を利用して、Storybook で MSW を活用 ◦ 正常系、異常系、データがない場合など、レスポンスを簡単にモックできるので、複数パターンの Story を簡単に作成 可能 • Jest + Testing Library + MSW（API リクエストするコンポーネントのユニットテスト） ref • https://storybook.js.org/addons/msw-storybook-addon • https://mswjs.io/docs/integrations/node/#test-runner
12. • client-preset • MSW モックハンドラ • GraphQL レスポンスのモックデータの factory 関数 • GraphQL API ドキュメント GraphQL スキーマからの自動生成
13. GraphQL レスポンスのモックデータの factory 関数 • graphql-codegen-typescript-mock-data を利用 ◦ GraphQL Code Generator のプラグインの一つ ◦ レスポンスモックデータの factory 関数を生成 ▪ MSW モックハンドラで利用する ◦ （後発の graphql-codegen-typescript-fabbrica というものがあるので検討したい） ref • https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-mock-data • https://the-guild.dev/graphql/codegen/plugins/typescript/typescript-fabbrica
14. GraphQL レスポンスのモックデータ 全部補完が効きます（大事！）
15. • client-preset • MSW モックハンドラ • GraphQL レスポンスのモックデータの factory 関数 • GraphQL API ドキュメント GraphQL スキーマからの自動生成
16. GraphQL API ドキュメント • SpectaQL が便利 ◦ 静的サイトが生成されるので GitHub Pages などで簡単にホスティング可能 • GraphQL スキーマの description もドキュメントに表示されるので、description を書くモチベーションになる ref • https://github.com/anvilco/spectaql
17. GraphQL API ドキュメント ref: https://www.useanvil.com/blog/engineering/autogenerate-graphql-docs-with-spectaql/
18. GraphQL API ドキュメント ref: https://www.useanvil.com/blog/engineering/autogenerate-graphql-docs-with-spectaql/
19. まとめ
20. まとめ GraphQL は強力な型システムを持っています。この優れた型システムに基づき、 GraphQL Code Generator などの自動生成ツールが充実しています。このエコシステムを巧みに活 用することで、開発体験を飛躍的に向上させることが可能です。型安全性を最大限に引き 出し、コード生成を通じて作業の効率化を図り、生産性を向上させましょう。
21. End ご清聴ありがとうございました