How to access cache keys outside of React component / hook in >=1.0.0-beta.13

[MichaelBurgess]

In 1.0.0-beta.12, I was able to do the following:

import { createCache } from "swr";

const cacheProvider = new Map();
const { cache, mutate } = createCache(cacheProvider);

const matchMutate = (matcher, data, shouldRevalidate = true) => {
  const keys = [];
  if (matcher instanceof RegExp) {
    // `provider` is your cache implementation, for example a `Map()`
    for (const k of cacheProvider.keys()) {
      if (matcher.test(k)) {
        keys.push(k);
      }
    }
  } else {
    keys.push(matcher);
  }

  const mutations = keys.map((k) => mutate(k, data, shouldRevalidate));
  return Promise.all(mutations);
};

export { cache }

// Elsewhere in my App.js, I do this:
import { cache } from "cache";

<SWRConfig value={{ cache, fetcher: API_FETCHER }}>
  ...etc
</SWRConfig>

The matchMutate function could be called from any code to invalidate cache keys - cacheProvider contains all the cached keys and my mutate function could find and clear them. E.g. I could call this in axios API then/finally blocks.

After upgrading to >=1.0.0-beta.13 (e.g. 1.0.0), createCache no longer exists and according to the docs I now need to initialise the cache like this:

import { mutate } from "swr";

const cacheProvider = new Map();

// The matchMutate function is unchanged

export { cacheProvider }

import { cacheProvider } from "cache";

<SWRConfig value={{ provider: () => cacheProvider, fetcher: API_FETCHER }}>
  ...etc
</SWRConfig>

The problem with this approach is that in my matchMutate function, cacheProvider is always an empty map and the only way I can get at the cache (and therefore its keys) is to use the hook like this:

const { cache } = useSWRConfig();

...in order to do that, I would need to add that line of code (or a hook that wraps it) into every component where I then want to invalidate some keys from and then pass the cache into a function that may then call matchMutate. I currently have nicely named functions like invalidateUserWidgets, that I can call when I want to invalidate widgets for a user and internally that function would call matchMutate with the correct API path / regex and could find and clear all the correct keys.

How can I create a global cache instance like I was in <=1.0.0-beta.12 and access its keys outside of a React hook / component? Adding in the useSWRConfig line to every component where I need to do this and then pass cache to a function to do cache key invalidating doesn't seem right to me.

Thanks.

[shuding]

Thanks for the detailed explanation!

The change in 1.0.0 that drops createCache is mostly for concurrent safety.

I think the problem is that you have to access to that mutate function (you still have access to the cache provider) without hooks, which is indeed a bit tricky. Maybe a solution for now is to "expose" the mutate function outside:

const cache = new Map()
let mutate

const Wrapper = ({ children }) => {
  mutate = useSWRConfig().mutate
  return children
}

export { cache, mutate, Wrapper }

And then use Wrapper inside SWRConfig:

<SWRConfig value={{ provider: () => cache }}>
  <Wrapper>
    <App/>
  </Wrapper>
</SWRConfig>

Because the app can be scoped by different cache providers, fundamentally the issue is that matchMutate can't access to its context (scope) if we don't use hooks inside. Another solution is to always use the default global cache and mutate from:

import { mutate, SWRConfig } from 'swr'

SWRConfig.default.cache

Let me know if it helps!

[MichaelBurgess]

Hi @shuding - thanks for the ideas!

I was able to get the last one working by no longer passing the provider prop to <SWRConfig value={{ ... and then accessing the SWRConfig.default.cache in my matchMutate function.

I may revisit this at some point, but for now as I have a single cache provided at root and I'm happy to accept the default one, this works for me.