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
140
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
70
Other Decks in Programming
See All in Programming
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
370
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
900
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
680
Next.js App Router
quramy
11
1.7k
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
170
Git Rebase
bkuhlmann
11
1.6k
Going beyond Apache Parquet's default settings
xhochy
0
130
Hanami and htmx
bkuhlmann
0
220
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
970
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
300
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
130
Code Reviews
bkuhlmann
4
900
Featured
See All Featured
Making Projects Easy
brettharned
109
5.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
222
21k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
[RailsConf 2023] Rails as a piece of cake
palkan
28
4k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Navigating Team Friction
lara
179
13k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
7
3.4k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
What's in a price? How to price your products and services
michaelherold
238
11k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
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 ご清聴ありがとうございました