【React 初心者】aspida/swrを使ってグローバルミューテートしてデータを再検証する

環境

    "next": "15.2.3",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "@aspida/axios": "^1.14.0",
    "@aspida/swr": "^1.14.0",
    "aspida": "^1.14.0",
    "axios": "^1.8.4",
    "swr": "^2.3.3",

フェッチにはaxiosを使ってます

問題

要約

• swrを使う際の要領でuseAspidaSWRを使ってグローバルミューテートを行おうとすると再検証されない

データを更新した際などにデータを再検証させる場合にmutateを行う必要があるが、このときバインドミューテーションとグローバルミューテーションから選択できる。

バインドミューテーションはSWRからフックを呼び出す際にmutateを呼び出すことで利用できる

const { data, mutate } = useSWR('/api/user', fetcher)

  mutate(); // 再検証

グローバルミューテーションはimport { mutate } from "swr"で呼び出す方法(useSWRConfigを呼び出しても可能)
keyを指定する必要があり、一致するkeyのデータの再検証のみを行う

 mutate('/api/user')

これをaspida/swrで同様に実装しようとすると再検証がされない

const { data } = useAspidaSWR(apiClient.user,"get")

// 別ファイル
 mutate('/api/user') // 呼び出しても再検証されない

解決方法

aspida/swrのkeyを指定する

const { data } = useAspidaSWR(apiClient.user,"get",{key:"api/user"})

// 別ファイル
 mutate('/api/user')

key名はエンドポイントにしておけばまず被ることもないだろうし、特に問題はないはず

一応指定しない場合のkeyの構造について
どうやら配列型になってるっぽい?以下aspida/swrのサンプルコードから引用

const { data: user } = useAspidaSWR(client.user);
const { data } = useAspidaSWR(client.articles, {
  query: { userId: user?.id ?? 0 },
  enabled: !!user,
});
// is an alias of
const { data } = useSWR(
  user ? [client.articles.$path({ query: { userId: user.id } }), "$get"] : null,
  () => client.articles.$get({ query: { userId: user.id } })
);

この配列がそれっぽい
mutateの中身はkey指定した方がスッキリしそうだし、今回の解決法でよさそう

参考

SWR　mutate(グローバルミューテート)
https://swr.vercel.app/ja/docs/mutation#global-mutate
aspida/swr
https://github.com/aspida/aspida/tree/main/packages/aspida-swr#readme