Tenstack Query(旧:react query）のuseMutationについて、使い方が分かってないので調べる。

そもそもmutationって？

mutation：変化,変更,転換,(世の)移り変わり

JSのmutation observerは、DOMツリーへ変更が加えられたことを監視することができる機能。

つまりデータの変化を検知することができる機能。

useMutationの使い方

useMutationはAPI関連の操作の状態の変化を検知する。

第1引数に関数を渡す。これをミューテーション関数と呼ぶ。
ミューテーション関数ではPOST・PUT・DELTEなどのAPIの操作を行う。

const mutation = useMutation(newTodo => axios.post('/todos', newTodo));

ミューテーション関数は mutate または mutateAsync メソッドを通じて呼び出される。

mutation.mutate(newTodo);

useMutationでは以下などが用意されており、各フェーズで処理を分けることができる。

• onError：エラー時に実行
• onSuccess：成功時に実行
• onSettled：エラーまたは成功時に実行
• onMutate：ミューテーション関数が発火する前に実行し、ミューテーション関数が受け取る値と同じ値を受け取る。
  optimistic UIでエラー時に情報のロールバックにも使える

mutation.status：ミューテーション関数は4つの状態を持つ

• idle：ミューテーション関数実行前
• loading：ミューテーション関数実行中
• error：ミューテーション関数の実行がエラーになった時
• success：ミューテーション関数の実行がエラーになった時

上記のstatusはisIdle, isLoading, isSuccess, isErrorでbooleanで検知することもできる

useMutationのメリット

• 状態管理とエラー処理の簡素化
  isLoading, isSuccess, isError, error などを用意してくれているので楽
• 自動リトライ
  指定された回数だけ自動的にリトライを試みることができる（retry, retryDelay）
• オプティミスティックUI更新
  onMutateでエラーが発生した場合に元の状態に戻す処理も簡単に実装可能
• 依存データのリフレッシュ
  ミューテーションが成功した後、関連するデータを自動的にリフレッシュ可能。キャッシュされたデータが最新のものに保たれる。

useMutationのデメリット

というかReactQueryのデメリット

• 複雑性の増加
  コードの読みやすさや保守性が影響を受ける可能性あり。チームメンバーがReact Queryや useMutation フックの概念になじみがない場合、学習コストが必要（今ココ！）
• 過度な依存
  便利すぎて自分で状態管理を行う能力が低下する可能性あり。シンプルな機能に対して、React Queryを用いると、オーバーキルとなる可能性も。
• カスタマイズの制限
  特定のユースケースに対して完全にカスタマイズすることは難しい場合も。