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

by 林憲吾

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

https://twitter.com/kenbu05 株式会社PICK CTO 林憲吾 Hayashi Kengo 自己紹介 ①経歴 ②趣味学生時代　スペースマーケット (インターン ) 2018-2019　ヤフー 2019-2022　スリーシェイク 2022-現在　 PICK CTO 筋トレ・バイク・釣り

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

01. はじめに

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

まとめ 02. GraphQLでの型渡しとデータフェッチの最適化 - colocation・graphql-codegen 導入すると → データに依存した Component Propsの型生成を自動化 → 保守性・開発効率上がる → Queryの使いまわしが減り、データフェッチの最適化

Slide 19

Slide 19 text

03. AtomicDesign と colocation の相性

Slide 20

Slide 20 text

AtomicDesignにおけるcolocation相性 03. GraphQLでのデータフェッチ最適化 - 必ずしも相性が良いとは限らない、、、 - データの再利用性 vs UIの再利用性の衝突 - 各階層にFragmentが絡むことでのデータ階層の複雑性の増加 - 依存関係の複雑化

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

04. まとめ

Slide 23

Slide 23 text

まとめ 04. - colocation と graphql-codegen を導入すると、 GraphQLのメリットを享受できる - AtomicDesign と colocation は必ずしも相性が良い訳ではなく、導入時には要検討

Slide 24

Slide 24 text

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