Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
GraphQLスキーマからの自動生成 - フロントエンド開発体験の向上
Search
hirataku
November 16, 2023
Programming
0
240
GraphQLスキーマからの自動生成 - フロントエンド開発体験の向上
tsukiji.graphql #2 LT で話した内容です。
https://tsukiji-graphql.connpass.com/event/298830/
hirataku
November 16, 2023
Tweet
Share
More Decks by hirataku
See All by hirataku
gql.tada の紹介
hiramatsutaku
0
180
Other Decks in Programming
See All in Programming
さきがけから振り返るアーキテクチャ刷新 / Reflecting on the Architectural Renewal from the Vanguard
nrslib
2
780
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
CSC307 Lecture 14
javiergs
PRO
0
220
入社1ヶ月でここまでやった!Findy Toolsインフラ支援の最適化
rvirus0817
6
1.4k
ドメイン駆動設計の実践
masuda220
PRO
19
5.2k
CSC307 Lecture 11
javiergs
PRO
0
240
Advanced App Shrinking Techniques
cbeyls
2
150
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
Composing an API the *right* way (Droidcon Berlin 2024)
zsmb
1
450
リハビリmruby
kishima
1
160
CSC307 Lecture 08
javiergs
PRO
0
330
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.9k
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
93
5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
Bash Introduction
62gerente
607
210k
For a Future-Friendly Web
brad_frost
173
9.2k
5 minutes of I Can Smell Your CMS
philhawksworth
200
19k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
4 Signs Your Business is Dying
shpigford
178
21k
The Pragmatic Product Professional
lauravandoore
29
6.1k
Optimizing for Happiness
mojombo
373
69k
It's Worth the Effort
3n
181
27k
Transcript
GraphQLスキーマからの自動生成 - フロン トエンド開発体験の向上 @hiramatsutaku 2023/11/16 tsukiji.graphql #2 https://tsukiji-graphql.connpass.com/event/298830/
自己紹介 • Taku Hiramatsu • 京都在住、娘👭 • 趣味 ◦ サッカー、山登り、コードを書くこと
• 職種 ◦ ソフトウェアエンジニア ▪ フロントエンドが主軸 • 経歴 ◦ 新卒で株式会社フリークアウト ◦ いくつかの新規事業に従事 ◦ 2020/6〜 株式会社カケハシ
今日話すこと
今日話すこと ここ数年、GraphQL を利用したプロダクトを複数開発してきました。 知見が溜まってきたので、フロントエンド観点で、開発体験を向上してくれる 「GraphQL スキーマから自動生成すると便利なもの」を共有したいと思います! (TypeScript 前提です)
GraphQL スキーマからの自動生成
GraphQL スキーマからの自動生成 • client-preset • MSW モックハンドラ • GraphQL レスポンスのモックデータの
factory 関数 • GraphQL API ドキュメント
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
client-preset - 運用しての所感 • 新規プロダクトでは、client-preset は迷わず入れて良い ◦ fragment-masking の制約はフロントエンドをシンプルにする ▪
コンポーネントの props が GraphQL スキーマと対応するため • 既存プロダクトに fragment-masking を適用していくのはそれなりのコストがかかる ◦ 機能追加する部分から適用していく方針を取った • Operation、Fragment の命名規則を作っておくと良い
• client-preset • MSW モックハンドラ • GraphQL レスポンスのモックデータの factory 関数
• GraphQL API ドキュメント GraphQL スキーマからの自動生成
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
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
• client-preset • MSW モックハンドラ • GraphQL レスポンスのモックデータの factory 関数
• GraphQL API ドキュメント GraphQL スキーマからの自動生成
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
GraphQL レスポンスのモックデータ 全部補完が効きます(大事!)
• client-preset • MSW モックハンドラ • GraphQL レスポンスのモックデータの factory 関数
• GraphQL API ドキュメント GraphQL スキーマからの自動生成
GraphQL API ドキュメント • SpectaQL が便利 ◦ 静的サイトが生成されるので GitHub Pages
などで簡単にホスティング可能 • GraphQL スキーマの description もドキュメントに表示されるので、description を書くモチベーションになる ref • https://github.com/anvilco/spectaql
GraphQL API ドキュメント ref: https://www.useanvil.com/blog/engineering/autogenerate-graphql-docs-with-spectaql/
GraphQL API ドキュメント ref: https://www.useanvil.com/blog/engineering/autogenerate-graphql-docs-with-spectaql/
まとめ
まとめ GraphQL は強力な型システムを持っています。この優れた型システムに基づき、 GraphQL Code Generator などの自動生成ツールが充実しています。このエコシステムを巧みに活 用することで、開発体験を飛躍的に向上させることが可能です。型安全性を最大限に引き 出し、コード生成を通じて作業の効率化を図り、生産性を向上させましょう。
End ご清聴ありがとうございました