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

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

Avatar for 林憲吾 林憲吾
September 19, 2024
Technology
650
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
970
電子署名サービスの品質戦略
Avatar for 林憲吾 hayashikengo
1
1.2k
CTOの役割と、カルチャーの醸成
Avatar for 林憲吾 hayashikengo
1
150

Other Decks in Technology

See All in Technology
Gifu WordPress Meetup #200 に向けて、私たちには何ができるだろうか？/ 2026-11-07 Gifu WordPress Meetup
Avatar for Toro_Unit (Hiroshi Urabe) torounit
0
190
基本から分かる！AWSセキュリティ運用の考え方と任せ方
Avatar for cm-usuda-keisuke cmusudakeisuke
1
430
「いつか使う」の「いつか」は来ない 〜AI駆動開発における「作らない」判断について〜
Avatar for Kazuki Sakamoto/ikki0006 ikki0006
0
150
`go get`したらELFが降ってきた件
Avatar for 鹿 taiyow
0
180
AI AgentによるEmbedded SREの取り組み
Avatar for norimichi.osanai tgidgd
1
350
AIに任せられるFlutterコードベースを作る 〜仕様をコードで表し、ハーネスで守る〜
Avatar for Yohei Maeda myohei
1
640
分析作業をどこまで任せるか自分で決められる
AIネイティブBI『Golden Analytics』が
良さげな話 /golden-analytics-is-ai-native-bi
Avatar for shinyaa31 shinyaa31
0
120
公共分野での生成AI活用
Avatar for Toru_Kubota toru_kubota
1
250
AIエージェントの監視、思考を見るか行動を見るか / Monitoring AI Agents: Thoughts or Actions
Avatar for Yusuke Shimizu yusukeshimizu
2
170
cdkd (CDK Direct)
Avatar for k.goto gotok365
4
250
SLOを阻む不安
Avatar for sraku sraku2159
0
230
顧客合意を取りながら進めるAWSコスト削減の実践
Avatar for OPTiM optim
0
110

Featured

See All Featured
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
610
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
41k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
520
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.9k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
56
10k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
2
12k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
670
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.9k
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.9k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
1
510
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.7k
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
980

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