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

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

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. ご清聴ありがとうございました