fetchの使い分け

①ページを開いた時

よくデータの一覧ページなんかを開いた時にデータの一覧が画面いっぱいに出る時とかに使う。

②データに何かしらの変更を加えた場合

アップデート、デリートなどでGraphQLを使ってデータを変更した場合に一連の変更処理が終わった時に変更内容を画面に反映させるために使う。

ただ、変更するデータの件数が1つだけなのにfetchするとまた一から全データを取得し直すことになって時間がかかったり、ローディングの途中で一瞬画面のデータが変更を加えた1件だけになったりする。

なので、変更するデータが1つとか少ない時はfetchは使わないでその変更したデータだけを既存のfetch済みのデータと入れ替える処理を行うとよい。

具体的には、

①findメソッドを使って変更のあったデータ(要素)を一意のカラム(プロパティ)を使って見つける(idとかね)。

②次に変更のあった要素の場所をindexOfメソッドで見つける。

③最後はspliceメソッドで第1引数に抽出をスタートする地点、第2引数に抽出する要素数、第3引数に抽出した場所に入れる新しい要素をそれぞれ入れることで古い要素を新しい要素で置き換えることが出来る。

気をつけるべきことは、spliceメソッドは副作用のあるメソッドであり、変更のあった要素を返すので、変更後のデータが欲しい時はデータの名前を使えばおk。

これを一瞬で導き出した先輩、やばすぎてやばい(語彙力)