はじめに

• useSWRMutationは、useSWRとmutateを組み合わせたカスタムフックで、データの更新処理をuseSWRと同じように扱えるようにするもの
• このフックは、triggerという関数を提供しており、任意のタイミングでデータの更新を行える
• triggerの引数は、trigger(arg, options)のように渡す

発生した問題

• triggerの実行時に、複数の引数を渡したいという要件があった
• 例えば、変更画面での更新処理の際に、変更前のデータと変更後のデータを渡したいという要件
• しかし、triggerは単一の引数しか受け取れないため、複数の引数を渡すことができないため、どうするか悩んでいた

解決策

• triggerの引数にbeforeUserとafterUserをまとめたargsオブジェクトを渡すことで、複数の引数を渡すことができる

async function sendRequest(url, { arg }: { arg: { beforeUser: User,afterUser: User } }) {
  // 更新処理
  //...
}

const App = async () => {

  const { trigger,isMutating } = useSWRMutation('api/endpoint', sendRequest)
  
  const beforeUser = { id: 1, name: 'Taro' }
  const afterUser = { id: 1, name: 'Jiro' }

  return (
    <button
      disabled={isMutating}
      onClick={async () => await trigger({ beforeUser,afterUser })}
    >
      Update User
    </button>
  )
}

• triggerに渡した引数は、sendRequestの第二引数に渡される

まとめ

• useSWRMutationのtriggerに複数の引数を渡す方法を紹介した

参考

• useSWRMutation