Full Stackな型安全を支えるGraphQLのFragment活用

Transcript

1. Full Stackな型安全を支える GraphQLのFragment活用 田中 杏直 / Tanaka Anji 2025/08/28 TsKaigi Mashup
2. 氏名：田中 杏直 / Tanaka Anji @anji0114 自己紹介 所属：匠技研工業 / プロダクトエンジニア
5. • GraphQLでの開発の流れ • データ取得の課題と Fragment • Full Stackな型安全を支える Fragment 今日お話しすること
6. GraphQLでの開発の流れ
7. スキーマの定義
8. バックエンド実装
9. GraphQL Codegen
10. 生成されたファイル
11. データ取得の設計課題と Fragment
12. どこでデータを取得する？問題
13. 他の設計パターン Repository + Hooks • どこでuseUserを呼ぶか？ • 親で呼ぶ？子で呼ぶ？複数の場所で呼んだら 重複する？ • コンポーネント追加のたびに、親の取得内容を 都度調整
14. 他の設計パターン Container/Presentational • どのレベルでContainerを作るか？ • ページ単位？セクション単位？コンポーネント単 位？
15. Fragment Colocationを使用することで
16. 子は親の取得位置を気にせず開発することできる
17. Full Stackな型安全を支える Fragment
19. バックエンド側で schemaを変更した時
20. 型エラーをコンポーネントレベルで出すことができる
21. コンポーネントが増えた場合でも
22. 該当コンポーネントだけを変えれば良い
23. まとめ • 従来の「どこでクエリを呼ぶか？」「親子で重複してない？」という判断コスト が減る。 • 各コンポーネントが必要なデータを Fragmentで宣言するため、 親の設計 や他コンポーネントの実装を知る必要がない。 • バックエンド側で Schemaを変更時、コンポーネントレベルでコンパイルエ ラーを出してくれる。
24. 匠技研工業ではエンジニアを募集しています！！
25. ありがとうございました！