SWRによるMutationと楽観的更新

swrから提供されるグローバルなmutate関数を使うと、アプリケーション内のどこからでも任意のキャッシュキーの再検証を開始できます。mutate('/api/user')を呼び出すと、すべてのuseSWR('/api/user')フックが再フェッチされます。

import { mutate } from 'swr'でインポートします。コンポーネント外のサーバーアクション後など、対象のデータに直接アクセスできるbound mutateがない場所でデータを無効化するのに便利です。

mutateの第2引数にデータを渡します。mutate('/api/user', updatedUser)はネットワークリクエストを実行せず、キャッシュをすぐにupdatedUserへ設定します。これはローカルミューテーションと呼ばれることもあります。

第3引数に{ revalidate: false }を追加すると、楽観的更新後にSWRが再フェッチするのを防げます。

useSWRMutationは、自動フェッチではなく、ユーザーが開始するミューテーション（フォーム送信やボタンのクリック）向けに設計されています。マウント時には実行されず、trigger()を呼び出したときだけ実行されます。

swr/mutationからインポートします。const { trigger, isMutating, data, error } = useSWRMutation('/api/post', sendRequest)。

useSWRMutationのfetcherは(key, { arg })を受け取ります。argはtrigger()に渡された値です。例: async (url, { arg: newPost }) => fetch(url, { method: 'POST', body: JSON.stringify(newPost) })。

trigger({ title: 'New Post', content: '...' })を呼び出すと、投稿データをargとしてミューテーションを実行できます。

useSWRMutation の isMutating は、ミューテーションリクエストの実行中に true になります。これを使って、リクエスト中は送信ボタンを無効にし、ローディングスピナーを表示して、重複送信を防止します。

これにより、通常は useState で管理する手動の isSubmitting 状態変数が不要になります。

楽観的更新とは、サーバーが変更を確認する前に、予想される結果をすぐに UI に反映することです。サーバーで成功すれば、それ以上の処理は必要ありません。失敗した場合は、更新前の状態にロールバックします。

このパターンにより、UI は瞬時に反応するように感じられます。たとえば、POST レスポンスを待たずに、いいねボタンがすぐに押された状態になります。

mutate(key, newData, { optimisticData: optimisticValue, rollbackOnError: true }) を使います。SWR はすぐにキャッシュを optimisticValue に設定し、再検証リクエストを送信します。リクエストが例外をスローした場合は、以前の値にロールバックします。

rollbackOnError: true オプションは、正しく動作させるために不可欠です。これがないと、ミューテーションに失敗した場合も、古い楽観的データがキャッシュに残ってしまいます。

rollbackOnError: true を設定してミューテーションが reject されると、SWR は楽観的更新の前に取得したスナップショットへキャッシュを自動的に復元します。手動でロールバックするコードは必要ありません。

また、ミューテーションのレスポンスボディが useSWR のデータ形式と一致しない場合は、populateCache: false も設定してください。これにより、レスポンスによってキャッシュが誤って更新されるのを防げます。

useSWR はバインドされた mutate を返します。例: const { data, mutate } = useSWR('/api/user', fetcher)。このバインドされた mutate は自動的に '/api/user' キーを対象にするため、キーをもう一度渡す必要はありません。

データの表示を所有するコンポーネント内では、バインドされた mutate を使います。関連のないコンポーネントやユーティリティ関数からキーを無効化する必要がある場合は、swr のグローバル mutate を使います。

React Query の useMutation には、trigger/isMutating と似たパターンがあります。主な違いは、React Query では queryClient.invalidateQueries と組み合わせた onSuccess コールバックが、標準的なキャッシュ無効化パターンであることです。SWR では、キャッシュ更新に mutate 関数を直接使います。

どちらも楽観的更新とロールバックをサポートしますが、API の形式は異なります。一方に慣れているチームであれば、もう一方もすぐに習得できます。

ミューテーションが成功した後には、3 つの選択肢があります。mutate(key) を呼び出して再取得する、API が更新後のリソースを返す場合はレスポンスボディでキャッシュを更新する、または楽観的更新と再検証を組み合わせる、という方法です。

リストのミューテーション（項目の追加）では、新しい項目を追加するようにキャッシュを手動で更新してから、サーバーの状態を確認するために再検証します。これにより、リスト全体を再取得せずにデータの一貫性を保てます。

エラー時に楽観的更新を自動的に元に戻すには、SWR の mutate でどのオプションを設定する必要がありますか？

Global mutate(key) は再検証を開始し、mutate(key, data) は再取得せずにキャッシュを更新します。useSWRMutation は、trigger()、isMutating 状態、extraArg のサポートにより、ユーザーが明示的に開始するミューテーションを処理します。optimisticData と rollbackOnError: true による楽観的更新を使うと、エラーからの自動復旧によって UI が瞬時に反応するように感じられます。

useSWR のバインドされた mutate は自身のキーを対象にします。swr のグローバル mutate はどこからでも使えます。