Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

GraphQLでの型渡しとデータフェッチの最適化

Avatar for 林憲吾 林憲吾
September 19, 2024
Technology
640
1

 GraphQLでの型渡しとデータフェッチの最適化

「テックリードの悩みを解決するGraphQLの話」にて登壇した資料です。
https://estie.connpass.com/event/328999/

Avatar for 林憲吾

林憲吾

September 19, 2024

More Decks by 林憲吾

See All by 林憲吾
GraphQLを安全に使うためにやっていること
Avatar for 林憲吾 hayashikengo
2
960
電子署名サービスの品質戦略
Avatar for 林憲吾 hayashikengo
1
1.1k
CTOの役割と、カルチャーの醸成
Avatar for 林憲吾 hayashikengo
1
140

Other Decks in Technology

See All in Technology
スキルを作る、その前に！複数人で使われるスキルを 作るためのプロセス
Avatar for Junki Furukawa junkifurukawa
1
160
【Findyテック文化祭ワークショップ】新卒エンジニア&採用担当と作る、 なりたい姿と今やるべき一歩
Avatar for ディップ株式会社 dip_tech
PRO
0
150
React Nativeでの OTA Updateって、 どう説明する？
Avatar for Ichiki ichiki1023
0
130
Claude Designがめちゃくちゃ便利なので使ってほしい
Avatar for morimorikochan diggymo
0
190
雪かき部 #7 もう怖くない！SELECT文！
Avatar for numa foursue
0
270
HacobuにおけるFDEとは/登壇資料（戸井田 裕貴）
Avatar for Hacobu hacobu
PRO
1
700
Lambda MicroVMsが分からなすぎたので使い所を1から考えてみた
Avatar for つくぼし tsukuboshi
2
290
KanaAI
Avatar for shreyas shinde shreyas1009
0
140
AIは爆速なのに、私が詰まっていた話 ― 音声入力と鳴くマスコットでボトルネックを削る
Avatar for Yuuki Yamashita yama3133
0
240
Swap and Memory Reclaim - Squeezing Out More RAM
Avatar for Kernel Recipes ennael
PRO
1
1.5k
いちAWSエンジニアのAI活用を振り返る #devio2026 / devio osaka 2026 kawahara
Avatar for MasahiroKawahara masahirokawahara
2
310
VS Code × GitHub Copilot での Fabric 開発
Avatar for Ryoma Nagata ryomaru0825
1
210

Featured

See All Featured
Side Projects
Avatar for Sacha Greif sachag
456
43k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
2.1k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.7k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
33
5k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
7.2k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
10k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
610
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
18k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
331
25k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
1
510
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.5k

Transcript

  1. GraphQLでの型渡しとデータフェッチの最適化 株式会社PICK 林憲吾 Hayashi Kengo

  2. https://twitter.com/kenbu05 株式会社PICK CTO 林憲吾 Hayashi Kengo 自己紹介 ①経歴 ②趣味 学生時代　

    スペースマーケット (インターン ) 2018-2019　 ヤフー 2019-2022　スリーシェイク 2022-現在　 PICK CTO 筋トレ・バイク・釣り

  3. はじめに GraphQLでの型渡しとデータフェッチの最適化 01. AtomicDesign と colocationの相性 02. 03. 目次 まとめ

    04.

  4. 01. はじめに

  5. PICKはどんなプロダクトを作っているのか？ 01. はじめに 電子契約 案件管理 顧客管理 and more…

  6. PICKの技術スタック 01. はじめに

  7. GraphQLを効率的に扱う為にしたこと 01. はじめに データフェッチ最適化 → colocationの概念取り入れた コンポーネントでの Propsの扱いを楽に → fragmentとgraphql-codegenを取り入れた

  8. 02. GraphQLでの型渡しとデータフェッチの最適化

  9. colocationとは？ 02. GraphQLでの型渡しとデータフェッチの最適化 データの取得ロジックと、そのデータを使う UIコンポーネントを 同じ場所にまとめて管理するという考え方。

  10. なぜ取り入れたか？ 02. GraphQLでの型渡しとデータフェッチの最適化 - コンポーネント内にデータ取得ロジックが集約 → 開発効率とメンテナンス性の向上 → データフェッチの最適化

  11. colocation具体例（ヘッダーの場合） 02. GraphQLでの型渡しとデータフェッチの最適化

  12. コンポーネントのデータ定義が共通化できる 02. GraphQLでの型渡しとデータフェッチの最適化

  13. 共通化される場合の GraphQLの定義 02. GraphQLでの型渡しとデータフェッチの最適化

  14. graqhpl-codegenとは？ 02. GraphQLでの型渡しとデータフェッチの最適化 GraphQLスキーマやクエリをもとに、 型安全なコードを自動生成するライブラリ

  15. graqhpl-codegenをなぜ取り入れたか？ 02. GraphQLでの型渡しとデータフェッチの最適化 - フロントエンド側で、 GraphQLを型安全に扱う為。 → GraphQLのメリットを最大限享受 → Fragmentの型生成が

    colocation と相性良かった

  16. graphql-codegen実装例①（ hooks編） 02. GraphQLでの型渡しとデータフェッチの最適化

  17. graphql-codegen実装例②（ fragment編） 02. GraphQLでの型渡しとデータフェッチの最適化

  18. まとめ 02. GraphQLでの型渡しとデータフェッチの最適化 - colocation・graphql-codegen 導入すると → データに依存した Component Propsの型生成を自動化

    → 保守性・開発効率上がる → Queryの使いまわしが減り、データフェッチの最適化

  19. 03. AtomicDesign と colocation の相性

  20. AtomicDesignにおけるcolocation相性 03. GraphQLでのデータフェッチ最適化 - 必ずしも相性が良いとは限らない、、、 - データの再利用性 vs UIの再利用性の衝突 -

    各階層にFragmentが絡むことでのデータ階層の複雑性の増加 - 依存関係の複雑化

  21. AtomicDesignにおけるcolocationの落とし所 03. GraphQLでのデータフェッチ最適化 - Fragmentルール化 - 上位コンポーネントに集約 - 必要な場合にのみ Colocationを使う

    - Prop Drillingを活用する

  22. 04. まとめ

  23. まとめ 04. - colocation と graphql-codegen を導入すると、 GraphQLの メリットを享受できる -

    AtomicDesign と colocation は必ずしも相性が良い訳ではなく、 導入時には要検討

  24. 最後に 04. - Twitter/Zennやってます！ご興味あれば見てみてください！ - https://x.com/kenbu05 - https://zenn.dev/kenghaya -

  25. ご清聴ありがとうございました

  26. None