React QueryのuseMutationでのサーバーデータの変化（ミューテーション）処理

こんばんは。

今日は「React QueryのuseMutationでのサーバーデータの変化（ミューテーション）処理」について説明いたします。

React QueryのuseMutationフックは、サーバーデータの変化（ミューテーション）を処理するために使用されます。これは主に、POST、PUT、PATCH、DELETEなどのHTTPメソッドを通じてデータを生成、更新、または削除する非同期操作を行う際に有用です。

基本的な使い方

import { useMutation } from 'react-query';

const mutation = useMutation(async (newData) => {
  const response = await fetch('/api/data', {
    method: 'POST',
    body: JSON.stringify(newData),
  });
  return response.json();
});

上記の例では、useMutationは非同期関数を引数として受け取ります。この関数はサーバーとの通信を処理し、必要に応じてデータを返すことができます。

返される値

useMutationは、さまざまな有用な値を返します：

• mutate: ミューテーション関数を実行するトリガー関数
• status: 現在のミューテーションの状態（idle、loading、success、error）
• data: 成功時に返されるデータ
• error: 失敗時に発生するエラーオブジェクト
• isLoading: ミューテーションが実行中かどうか
• isError: エラーが発生したかどうか
• isSuccess: ミューテーションが成功裏に完了したかどうか

例：フォーム送信の処理

function SubmitForm() {
  const mutation = useMutation((formData) => {
    return fetch('/api/submit', {
      method: 'POST',
      body: JSON.stringify(formData),
    });
  });

  const handleSubmit = (event) => {
    event.preventDefault();
    const formData = {
      // フォームデータの収集
    };
    mutation.mutate(formData);
  };

  if (mutation.isLoading) {
    return <div>送信中...</div>;
  }

  if (mutation.isError) {
    return <div>エラー発生: {mutation.error.message}</div>;
  }

  if (mutation.isSuccess) {
    return <div>送信成功！</div>;
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* フォームフィールド */}
      <button type="submit">送信</button>
    </form>
  );
}

オプション設定

useMutationは、第2引数としてオプションオブジェクトを受け取ることができます：

• onSuccess: ミューテーションが成功したときに呼び出される関数
• onError: ミューテーションが失敗したときに呼び出される関数
• onSettled: ミューテーション完了後（成功または失敗）に呼び出される関数
• retry: 失敗時の再試行回数の設定

const mutation = useMutation(submitData, {
  onSuccess: (data) => {
    // 成功時の処理
  },
  onError: (error) => {
    // エラー処理
  },
  retry: 3, // 最大3回再試行
});

キャッシュの無効化

ミューテーション後に関連するデータを再取得する必要がある場合、queryClientを使用してキャッシュを無効化できます。

import { useMutation, useQueryClient } from 'react-query';

function DeleteItem() {
  const queryClient = useQueryClient();

  const mutation = useMutation(deleteItemById, {
    onSuccess: () => {
      // 'items'キーを持つキャッシュを無効化
      queryClient.invalidateQueries('items');
    },
  });

  // ...
}

まとめ

• useMutationは、サーバーデータの変化を管理するために使用されます。
• ミューテーションの状態と結果を簡単に追跡できます。
• 成功または失敗時に呼び出されるコールバック関数を設定して、追加のロジックを実装できます。
• queryClientを活用して、ミューテーション後のキャッシュを管理できます。

useMutationを適切に活用することで、非同期のミューテーション操作を効率的に管理し、アプリケーションの複雑さを軽減することができます。

今日は以上です。

ありがとうございました。
よろしくお願いいたします。