Question: How useSWR cache depends on the fetcher?

[Jack-Works]

I have 3 useSWR call:

const a = useSWR('query', { fetcher: getDataA })
const b = useSWR('query', { fetcher: getDataB })
const c = useSWR('query', { fetcher: getDataC })

And all these three requests are revalidated by the same event. Then I found in our application, a and b will return data returned by c.

If I change to

const a = useSWR('get-a', { fetcher: getDataA })
const b = useSWR('get-b', { fetcher: getDataB })
const c = useSWR('get-c', { fetcher: getDataC })

The problem is gone. I wonder if useSWR doesn't use the fetcher as one of its cache keys. Furthermore, what if the fetcher changes every call? (inlined function fetcher: () => ...)

I use "query" cause getDataA/B/C does not need any parameters so the first argument of useSWR makes no sense for the fetcher

[sergiodxa]

The cache doesn’t store the fetcher, it’s only a map (literally a Map) of key:data, if you use the same key with different fetchers only the last one will be stored in the cache.

If the data is different then the key must be different, the key is the id of the data, what i recommend you to do is to create hooks like useA, useB, etc. And keep a key and a fetcher, this way you only call those hooks and can be sure both key and fetcher are always the same.

[Jack-Works]

Umm that's not very obvious. Does it possible to specify separate cache in the third option?

[sergiodxa]

The cache is global and can’t be changed

[Jack-Works]

I found it is very inconvenient to mix the cache key with parameters. We have many different fetchers in our project.

I need a solution like this:

const swr = useSWR(address, { fetcher: getAddress, key: 'get some addr' })

Sharing a global cache store is very unfriendly to the multiple fetcher case and very likely to cause bugs.

[dangoldstein]

I encountered the same issue, I think we need more documantation about this behaviour

[colmanhumphrey]

Got caught with this too. Do we keep the cache across the various hooks if we add a deduping key that doesn't do anything other than differentiate between fetchers?