Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for 林憲吾 林憲吾
September 19, 2024
Technology
1
570

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

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

Avatar for 林憲吾

林憲吾

September 19, 2024
Tweet

More Decks by 林憲吾

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

Other Decks in Technology

See All in Technology
クラウド時代における一時権限取得
Avatar for krrrr38 krrrr38
1
150
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
44k
Kaggleの経験が実務にどう活きているか / kaggle_findy
Avatar for Sansan R&D sansan_randd
1
190
All About Sansan – for New Global Engineers
Avatar for Sansan, Inc. sansan33
PRO
1
1.4k
三菱UFJ銀行におけるエンタープライズAI駆動開発のリアル / Enterprise AI_Driven Development at MUFG Bank: The Real Story
Avatar for 三菱UFJインフォメーションテクノロジー株式会社 muit
10
20k
AWS Bedrock Guardrails / 機密情報の入力・出力をブロックする — Blocking Sensitive Information Input/Output
Avatar for Kazuhito Nakayama kazuhitonakayama
2
190
問い合わせ自動化の技術的挑戦
Avatar for Recruit recruitengineers
PRO
2
120
AI ネイティブ組織への変革:ビジネスとITの統合が拓く未来／ AIで“はたらく”をアップデートする人材業界パーソルキャリアのリアル
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
120
Master Dataグループ紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
4.4k
名刺メーカーDevグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
1.1k
マルチロールEMが実践する「組織のレジリエンス」を高めるための組織構造と人材配置戦略
Avatar for coconala_engineer coconala_engineer
2
280
メタデータ同期に潜んでいた問題 〜 Cache Stampede 時の Cycle Wait を⾒つけた話
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
140

Featured

See All Featured
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
130
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
400
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.4k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
130
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
470
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
460
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
0
150
Designing for Performance
Avatar for Lara Hogan lara
611
70k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
14k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
1
1.4k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
130

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