ReactのSWRで、複数のキーをまとめてmutateしたい

2021/10/01 09:22:53

たとえばページングが必要なリストがあって、そのリストをどこかで増減させた場合。

いま見てるページに関わらず、全てのリストを最新のものにしたい・・って話。

正規表現でも渡せればいいけど、`mutate()`には単一の文字列キーしか渡せないので、さてどうするか？

力ずくでやる

というのが、現状ではドキュメントにも載ってる正解の方法らしい。

Cache – SWR

そのコードがこちら。

import { useSWRConfig } from 'swr';

function useMatchMutate() {
  const { cache, mutate } = useSWRConfig()
  return (matcher, ...args) => {
    if (!(cache instanceof Map)) {
      throw new Error('matchMutate requires the cache provider to be a Map instance')
    }

    const keys = []

    for (const key of cache.keys()) {
      if (matcher.test(key)) {
        keys.push(key)
      }
    }

    const mutations = keys.map((key) => mutate(key, ...args))
    return Promise.all(mutations)
  }
}

という感じで、

`useSWRConfig()`から、キャッシュを直接操作する
全てのキーに対して、任意の正規表現をあてて
該当するものを`mutate()`

わかりやすい！けど、自作せんでいいように同梱してほしいな〜。

デフォルトではキャッシュ層に`Map`が使われていて、それを想定したコードになってることに注意。
キャッシュ層をカスタマイズしてるなら、それ用にコードを書き換える必要があるということ。