Clear dedupingInterval of an unmounted key

Bug report

Description

I am developing a simple CRUD application with two views:

App.jsx

<Route path="/" component={User} />
<Route path="/edit" component={Edit} />

User.jsx

const { data } = useSWR('/api/user', fetcher, { dedupingTime: 60000 });

return (
  <h1>{data.name}</h1>
)

Edit.jsx

const editName = (name) => {
  fetch('/api/user/edit', { method: 'post', name })
  mutate('/api/user') // here User.jsx is unmounted
}

return (
  <button onClick={editName}>EDIT NAME</button>
)

If the user follows these steps:

• Navigate to ‘/’
• Navigate to ‘/edit’
• Click on edit name button
• Come back to ‘/’ after 1 second

/api/user data contains an old cached value.

I’ve tried to manually delete the cache value instead of calling mutate, but the issue remains. CONCURRENT_PROMISES remains fullfilled with the previous payload.

const editName = (name) => {
  fetch('/api/user/edit', { method: 'post', name })
  cache.delete('/api/user')
}

Expected Behavior

After calling mutate on Edit.jsx, I expect that a revalidation occurs when User.jsx is mounted, ignoring dedupingInterval value. In other words, dedupingInterval should be cleared if mutate is called on an unmounted key.

[muqg]

@shuding Right, but then we can just fallback to a regular mutate(key) call in case that a global fetcher is not provided, yet still have this behavior by default when there is a configured global fetcher.

What’s more doing a mutate(key, fetcher(key)) opts out of some built-in features such as deduping, but that one in particular I think is irrelevant, since I can’t think of a single case where one would do mutate(key, fetcher(key)) multiple times following a single mutation request to the server.

However, when mutate(key) is called in a case where not mounted component has called useSWR(key) I would expect the behavior logic to follow something like this:

This I think illustrates the bigger issue with my expectations about what a mutate call should do when no mounted component is calling useSWR(key) at this very moment. Doing a mutate(key) should at the very least remove the entry from cache in order to allow the useSWR(key) call to fetch a fresh resource. In this way, even if useSWR is using a locally defined fetcher, we are still not going to be left with a stale entry. Yes, if we remove an entry from cache, this is probably going to pop up the loading indicator once again the next time a given component is mounted, but isn’t stale (and possibly inconsistent) data display worse than a janky loading indicator?

Currently calling mutate(key) when no mounted component is calling useSWR(key) leaves us with stale data as described in my other issue #751.

[MoonBall]

The mutate() has the third param shouldRevalidate, But calling mutate('key', undefined, true) doesn’t clean previous request result. I think it is the root cause of this issue.

Although there is no mounted hook, we can simply delete the previous request result. It seems like that the revalidate() has happened for specific key.