GraphQL の Fragment Colocation を導入したら依存関係がスッキリしてクエリもコンポーネントも書きやすくなった

この記事は Money Forward Engineering 1 Advent Calendar 2022 11 日目の投稿です 🎄 昨日 10 日目は cabossoldir さんによる 『コードレビューのとき、私は何をレビューしているのか？』 でした。 🙈 TL;DR Fragment Colocation とは、コンポーネントが必要とするデータを Fragment にまとめてコンポーネントと同じ場所に配置 (co-locate) すること Fragment Colocation を導入することで、「Query や Mutation を実行するコンポーネント」と、「それらの結果を必要とするコンポーネント」との関心の分離ができる Query, Mutation, Fragment はそれを実行するあるいは必要とするコンポーネントと同じファイル内に宣言すると依存関係が見やすく、変更が

[sh19910711]

"Fragment Colocation: コンポーネントが必要とするデータを Fragment にまとめてコンポーネントと同じ場所に配置 (co-locate) する / GraphQL Code Generator の near-operation-file-preset を使う" '22

[shingo-sasaki-0529]

GraphQL とコンポーネントを密にするのはどうしてもまだ懐疑的だ。 コンポーネントが API に関する知識を持ちすぎてる気がするけど、 Fragment は API の知識じゃなくてデータモデルに過ぎないか…？

[efcl]

GraphQLでコンポーネントの近くにFragmentを置く方法