SWRでエラー発生後にエラーの情報がクリアできない
SWRでAPI実行時にエラーが発生した場合、同じKeyでuseSWRを再度実行してもfetcherが呼ばれない。 キャッシュにエラー情報がすでに格納されている場合は、fetcherを呼ばずにいきなりエラーを返すようだ。
cacheの中身を確認。value.errorにあるエラー情報をクリアしたい。errorをundefinedにしたい。
（下の絵は、cacheの配列の中身。このkeyのAPI実行時にエラーが発生して、errorにエラー情報が格納されている）
https://gyazo.com/ecd4741e4a26fad0dbe588c4956b7b00
SWRのこのIssueに似ている問題のような気がする。Suspenseを有効にしているところも同じ。 このIssueは解決していなそう。
mutateでキャッシュをクリアしてみた。
でもこれはvalue.dataをundefinedにするだけで、errorには影響を及ぼせないようだ。
code: javascript
import { mutate } from 'swr'
const clearCache = () => mutate(
() => true,
undefined,
{ revalidate: false }
)
// ...clear cache on logout
clearCache()
（React Routerのnavigateではなくwindow.location.hrefによりページを遷移）
この方法で合っているのか調べても確信が持てなかった。
Suspenseを有効にしてSWRを使っていれば同じ問題に当たりそうだけど、どうも有用な記事が見当たらなかった。
さらに分かったこと
このあとこちらのIssueを発見。
mutateで置き換えるdataの値をundefinedからnullへ変更。
これならReact Routerのnavigateで該当のデータ取得を含むページに遷移しても、API実行を再試行してくれた。
code: javascript
import { mutate } from 'swr'
const clearCache = () => mutate(
() => true,
null,
{ revalidate: false }
)
// ...clear cache on logout
clearCache()
この問題はどうやらデータ取得の初回でAPIエラーが発生した場合に、再度APIを実行しようとしてもSWRのキャッシュに持っているエラーが即返ってしまうようだ。
datagがnullになることで何か初回とは違う挙動になるのだろうと理解した。
（SWRのコードを検索してみたけど、うまく該当の箇所は見つけられず）