卒業研究でNextjsのApp Routerを使ったWebサービスを開発しました。
今回はその中でもミューテーションユーティリティに焦点を当てて紹介します。
プロジェクトの初期段階でユーティリティhooksを用意したいという方の助けになればと思いますー！
useMutate
useMutate() は以下の機能を備えるカスタムフックです。react queryの useMutationをラップして各種コンポーネントとの統合などの機能を加えました。
- tanstack queryのuseMutationベース
- ローディング中か(isLoading)などの状態の管理
- react-hot-toastによるトースト表示
- Buttonとの統合
useMutateで囲うだけで利用できる
useMutate() は第一引数にミューテートするasync関数を渡すだけで利用し始めることができます。これにより既存のイベントハンドラに手軽に機能追加できることができます。またとりあえずイベントハンドラは useMutate() で囲っておけば後で楽できるということだけ抑えておければいいので学習コストも最小限で済むというのも狙いの一つです。
const save = async ()=> { ... }
// ↓↓↓ useMutateで囲うだけ
const save = useMutate(async ()=>{ ... })
toast表示
オプションを指定することでreact-hot-toastを使って簡易的にトースト表示ができます。
const save = useSave(async ()=>{
// TODO
}, {
loading: { toast: "保存中" },
onSuccess: { toast: "保存しました" },
})
MutateButton
useMutateで取得したmutationオブジェクトをもとにローディングの設定などをカプセル化して行うコンポーネントです。
mutationの状態（ローディング中かどうかなど）に応じて自動的にボタンの見た目を変えてくれます。disabledやローディング表示などを自動的に設定してくれるということです。
const save = useMutate(async ()=>{})
+ <MutateButton mutation={save}>
保存
+ </MutateButton>
またMutateButtonはプロジェクトで用意しているButtonをラップしただけなので学習コストも最小限で済んでいます。
まとめ
useMutate()フックとMutateButtonコンポーネントを用意することでミューテーション時の状態管理や状態の管理をプロジェクト内で共通化できました。
また卒業研究の中では時間の関係上なかなか実装できなかった 一度だけミューテーションを実行するための once オプション などの機能も増やしていきたいです。
Discussion