アプリケーション開発
UI 表示に使うデータを扱いやすくできる。具体的には、データを宣言する部分と取得部分に分けられる。どういうことかというと、Component ベースで開発をしている場合に各コンポーネントで必要なデータを宣言し、それらを束ねる Root でデータの取得を行う。
そのため、発行される Query は各コンポーネントで宣言された必要なデータを束ねたものになる。それを Root コンポーネントで取得する。そうすることで、Performance と DX を担保できるようになる。Root で適度なデータをまとめてとることで素早くコンポーネント表示できるし、コンポーネントとデータが近くにあることで開発者は読みやすいし拡張を行いやすい。さらにいうと、おそらくデータの変更がコンポーネントに閉じるので他への副作用を考慮しないで済むようになりそう。コンポーネントからコンポーネントにデータをウェア足すときは子コンポーネントで定義したFragment を渡す。
これらを考慮すると、アプリケーション開発はこうなる?
- コンポーネント分割をざっと行う
- コンポーネントに必要な Fragment(データ) を定義する
-
コンポーネントを束ねる Root でクエリを定義する
- でかいデータになりそうだったら Root コンポーネントの見直しを行う?
- サーバー側は対応できるようなリゾルバを書く
-> クライアントに決定権があるのでこれで大枠正しそう
逆にこの戦略を取らなかった場合、子コンポーネントで必要なデータが増えた時に子コンポーネントの他に必要とするデータの型ファイルの変更をしに行かないといけないので DX が悪い。もしかしたら親コンポーネントのファイル修正になるかもしれない。前述の方法をとっていれば、子コンポーネントの Fragment 変更とサーバの変更で済む。
Fragment Colocation
どうやって保つ?
- Fragment (query / mutation) 定義はコンポーネントに書く
- 子コンポーネントが必要とするデータは Fragment Spread で記述する
- Fragment に登場したフィールドをそのコンポーネント自身で消費する