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
林憲吾
September 19, 2024
Technology
1
400
GraphQLでの型渡しとデータフェッチの最適化
「テックリードの悩みを解決するGraphQLの話」にて登壇した資料です。
https://estie.connpass.com/event/328999/
林憲吾
September 19, 2024
Tweet
Share
More Decks by 林憲吾
See All by 林憲吾
GraphQLを安全に使うためにやっていること
hayashikengo
2
610
電子署名サービスの品質戦略
hayashikengo
1
730
CTOの役割と、カルチャーの醸成
hayashikengo
1
72
Other Decks in Technology
See All in Technology
表現を育てる
kiyou77
1
230
Windows の新しい管理者保護モード
murachiakira
0
170
ユーザーストーリーマッピングから始めるアジャイルチームと並走するQA / Starting QA with User Story Mapping
katawara
0
260
TAMとre:Capセキュリティ編 〜拡張脅威検出デモを添えて〜
fujiihda
2
360
クラウドサービス事業者におけるOSS
tagomoris
3
950
わたしのOSS活動
kazupon
2
300
オブザーバビリティの観点でみるAWS / AWS from observability perspective
ymotongpoo
9
1.7k
コンピュータビジョンの社会実装について考えていたらゲームを作っていた話
takmin
1
480
Perlの生きのこり - エンジニアがこの先生きのこるためのカンファレンス2025
kfly8
1
220
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
3
1.1k
プロダクトエンジニア 360°フィードバックを実施した話
hacomono
PRO
0
120
Amazon S3 Tablesと外部分析基盤連携について / Amazon S3 Tables and External Data Analytics Platform
nttcom
0
150
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Designing for Performance
lara
604
68k
BBQ
matthewcrist
87
9.5k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
560
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Producing Creativity
orderedlist
PRO
344
39k
The Cult of Friendly URLs
andyhume
78
6.2k
Become a Pro
speakerdeck
PRO
26
5.1k
Transcript
GraphQLでの型渡しとデータフェッチの最適化 株式会社PICK 林憲吾 Hayashi Kengo
https://twitter.com/kenbu05 株式会社PICK CTO 林憲吾 Hayashi Kengo 自己紹介 ①経歴 ②趣味 学生時代
スペースマーケット (インターン ) 2018-2019 ヤフー 2019-2022 スリーシェイク 2022-現在 PICK CTO 筋トレ・バイク・釣り
はじめに GraphQLでの型渡しとデータフェッチの最適化 01. AtomicDesign と colocationの相性 02. 03. 目次 まとめ
04.
01. はじめに
PICKはどんなプロダクトを作っているのか? 01. はじめに 電子契約 案件管理 顧客管理 and more…
PICKの技術スタック 01. はじめに
GraphQLを効率的に扱う為にしたこと 01. はじめに データフェッチ最適化 → colocationの概念取り入れた コンポーネントでの Propsの扱いを楽に → fragmentとgraphql-codegenを取り入れた
02. GraphQLでの型渡しとデータフェッチの最適化
colocationとは? 02. GraphQLでの型渡しとデータフェッチの最適化 データの取得ロジックと、そのデータを使う UIコンポーネントを 同じ場所にまとめて管理するという考え方。
なぜ取り入れたか? 02. GraphQLでの型渡しとデータフェッチの最適化 - コンポーネント内にデータ取得ロジックが集約 → 開発効率とメンテナンス性の向上 → データフェッチの最適化
colocation具体例(ヘッダーの場合) 02. GraphQLでの型渡しとデータフェッチの最適化
コンポーネントのデータ定義が共通化できる 02. GraphQLでの型渡しとデータフェッチの最適化
共通化される場合の GraphQLの定義 02. GraphQLでの型渡しとデータフェッチの最適化
graqhpl-codegenとは? 02. GraphQLでの型渡しとデータフェッチの最適化 GraphQLスキーマやクエリをもとに、 型安全なコードを自動生成するライブラリ
graqhpl-codegenをなぜ取り入れたか? 02. GraphQLでの型渡しとデータフェッチの最適化 - フロントエンド側で、 GraphQLを型安全に扱う為。 → GraphQLのメリットを最大限享受 → Fragmentの型生成が
colocation と相性良かった
graphql-codegen実装例①( hooks編) 02. GraphQLでの型渡しとデータフェッチの最適化
graphql-codegen実装例②( fragment編) 02. GraphQLでの型渡しとデータフェッチの最適化
まとめ 02. GraphQLでの型渡しとデータフェッチの最適化 - colocation・graphql-codegen 導入すると → データに依存した Component Propsの型生成を自動化
→ 保守性・開発効率上がる → Queryの使いまわしが減り、データフェッチの最適化
03. AtomicDesign と colocation の相性
AtomicDesignにおけるcolocation相性 03. GraphQLでのデータフェッチ最適化 - 必ずしも相性が良いとは限らない、、、 - データの再利用性 vs UIの再利用性の衝突 -
各階層にFragmentが絡むことでのデータ階層の複雑性の増加 - 依存関係の複雑化
AtomicDesignにおけるcolocationの落とし所 03. GraphQLでのデータフェッチ最適化 - Fragmentルール化 - 上位コンポーネントに集約 - 必要な場合にのみ Colocationを使う
- Prop Drillingを活用する
04. まとめ
まとめ 04. - colocation と graphql-codegen を導入すると、 GraphQLの メリットを享受できる -
AtomicDesign と colocation は必ずしも相性が良い訳ではなく、 導入時には要検討
最後に 04. - Twitter/Zennやってます!ご興味あれば見てみてください! - https://x.com/kenbu05 - https://zenn.dev/kenghaya -
ご清聴ありがとうございました
None