概要

この記事はジャンルなしオンラインもくもく会 Advent Calendar 2022の8日目の記事です。
最近、Reactのデータ取得のためのHooksライブラリであるSWRを触っていて、キャッシュの管理に少しハマりましたので、今回メモ書きを残しておきたいと思います。なお、SWRについての概要はデータ取得のための React Hooks ライブラリ「SWR」をNext.jsで試してみたの記事などをご参照ください。

前提

前提とするSWRのバージョンは1.3.0とします。

キャッシュの管理単位

SWR 触ってみたの記事の「データ取得」の項にある通り、useSWRの第1引数に設定するキーの単位で、キャッシュが管理されています。例えば、画面でデータのid毎にキャッシュを保持したい場合は、/api/users/${userId}　のような形でキーを設定します。

手動での再取得

SWRの機能を簡単にまとめる - 手動で再取得したい場合の記事にある通り、mutate('/api/users/${userId}')の形式でキーを指定し、手動で再取得を行うことが可能です。

キャッシュの削除

useSWR cache managementの記事で紹介されている通り、mutateを使って直接データの更新をする方法と、useSWRConfig　のcacheのdeleteを使う方法が挙げられます。
個人的には、cacheのdeleteを使う方が分かりやすいかなと思います、cache.delete('/api/users/${userId}')のようにキーを指定して、キャッシュの削除が行えます。