Description
TL;DR, a mutation causes a cache invalidation which triggers a re-fetch. If another mutation happens before the re-fetch finishes, a second re-fetch isn't triggerd, and the returned value ends up being stale, because it doesn't account for the second mutation. Is this expected? Is there a way around this? Details and codesanbox and etc. below.
We're running into a quirk with cache invalidation, and I wonder if someone has advice or insight.
Imagine the following endpoints:
getColor: returns the current color valueupdateColor: updates the current color value
getColor, provides the ['Color'] tag, and updateColor, invalidates that tag
The problem we're running into is: a user updates the color, the re-fetch is triggered. Before the re-fetch finishes, the user updates the color again. When the original re-fetch finishes, it comes back with the wrong color value, because the user has made a new change that wasn't accounted for. A second re-fetch wasn't triggered I assume because one was already in progress. What are we supposed to do in such a scenario? Ideally, I think I'd want to force another refetch to happen, after the second mutation, rather than it being ignored.
Here's a codesandbox link for what I'm talking about: https://codesandbox.io/s/vigorous-sunset-tyu1mz?file=/src/store.ts
And Here's a gif showing the scenario. I show it working normally changing the color between blue, and then red. Then I show what happens when the user changes the color, then changes the color again after the re-fetch has started from the cache invalidation.
