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
530
GraphQLでの型渡しとデータフェッチの最適化
「テックリードの悩みを解決するGraphQLの話」にて登壇した資料です。
https://estie.connpass.com/event/328999/
林憲吾
September 19, 2024
Tweet
Share
More Decks by 林憲吾
See All by 林憲吾
GraphQLを安全に使うためにやっていること
hayashikengo
2
800
電子署名サービスの品質戦略
hayashikengo
1
930
CTOの役割と、カルチャーの醸成
hayashikengo
1
89
Other Decks in Technology
See All in Technology
CoRL 2025 Survey
harukiabe
1
200
このままAIが発展するだけでAGI達成可能な理由
frievea
0
110
AWS Control Tower に学ぶ! IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
y___u
0
170
速習AGENTS.md:5分で精度を上げる "3ブロック" テンプレ
ismk
6
1.6k
React19.2のuseEffectEventを追う
maguroalternative
0
300
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
8
1.1k
ニッポンの人に知ってもらいたいGISスポット
sakaik
0
150
AgentCon Accra: Ctrl + Alt + Assist: AI Agents Edition
bethany
0
110
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
14k
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
kenichirokimura
3
330
【Kaigi on Rails 事後勉強会LT】MeはどうしてGirlsに? 私とRubyを繋いだRail(s)
joyfrommasara
0
270
OAuthからOIDCへ ― 認可の仕組みが認証に拡張されるまで
yamatai1212
0
130
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
8
910
A designer walks into a library…
pauljervisheath
209
24k
Docker and Python
trallard
46
3.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Site-Speed That Sticks
csswizardry
12
900
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Designing for Performance
lara
610
69k
How STYLIGHT went responsive
nonsquared
100
5.8k
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