Closed2023/07/26にクローズ2

useSWR のキャッシュを削除する

uttk 2023/07/26

結論

SWR の useSWR() などのキャッシュを削除したい場合は、useSWRConfig() から cache オブジェクトを取得し、そのオブジェクトから削除できる。

import useSWR, { useSWRConfig } from "swr";

const Component = ({ id }: { id: string }) => {
  const { cache } = useSWRConfig();
  const { data } = useSWR(`key-${id}`, fetcher);

  useEffect(() => {
    // id が変わった時、またはアンマウントされる時にキャッシュを削除する
    return () => {
      cache.delete(`key-${id}`)
    }
  }, [id])

  /* -- 省略 -- */
}

uttk 2023/07/26

使いどころとしては、useSWR() で取得した値を initialValue みたいな初期値で扱う時、キャッシュが削除されてないと、

useSWR() でデータを取得
initialValue に取得したデータをセット
別ページに遷移後、1 の取得データを更新
遷移先のページから戻って来る
useSWR() が 1 で取得した(古い)データを返す
a. この時のデータは 3 の変更内容を反映していない
initialValue に取得した(古い)データをセット
useSWR() が最新のデータを返す
initialValue に最新のデータがセットされる
が、しかし初期値なので最新のデータが無視されてしまう

みたいなことになってしまった時の応急処置で使える。

本来であれば、3. 別ページに遷移後、1 の取得データを更新 で mutate() を実行するべきなんだが、SWR を段階的に導入して行った場合などに mutate() を実行できない事例があったので、今回はキャッシュ削除で対応した。( 後々は mutate で対応したい )

このスクラップは2023/07/26にクローズされました