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

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

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
990
CTOの役割と、カルチャーの醸成
Avatar for 林憲吾 hayashikengo
1
95

Other Decks in Technology

See All in Technology
配列に見る bash と zsh の違い
Avatar for kazzpapa3 kazzpapa3
3
160
学生・新卒・ジュニアから目指すSRE
Avatar for Hiroya Onoe hiroyaonoe
2
680
予期せぬコストの急増を障害のように扱う――「コスト版ポストモーテム」の導入とその後の改善
Avatar for Masahiro Yoshizawa muziyoshiz
1
2k
20260208_第66回 コンピュータビジョン勉強会
Avatar for KeiichiIto1978 keiichiito1978
0
180
Tebiki Engineering Team Deck
Avatar for Tebiki, Inc. tebiki
0
24k
Bedrock PolicyでAmazon Bedrock Guardrails利用を強制してみた
Avatar for Yudai Jinno yuu551
0
250
Why Organizations Fail: ノーベル経済学賞「国家はなぜ衰退するのか」から考えるアジャイル組織論
Avatar for Yasunobu Kawaguchi kawaguti
PRO
1
140
ランサムウェア対策としてのpnpm導入のススメ
Avatar for Satoru Ishikawa ishikawa_satoru
0
210
Introduction to Sansan for Engineers / エンジニア向け会社紹介
Avatar for Sansan, Inc. sansan33
PRO
6
68k
Greatest Disaster Hits in Web Performance
Avatar for Estela Franco guaca
0
280
インフラエンジニア必見!Kubernetesを用いたクラウドネイティブ設計ポイント大全
Avatar for 高棹大樹 daitak
1
380
FinTech SREのAWSサービス活用/Leveraging AWS Services in FinTech SRE
Avatar for maaaato maaaato
0
130

Featured

See All Featured
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
380
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.2k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.3k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
17k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
67
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.2k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
3
220
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
120
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
69
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
430
Between Models and Reality
Avatar for mayunak mayunak
1
190
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
270

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