Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mutation that goes out during an existing re-fetch caused by invalidation, doesn't trigger another invalidation #3386

Closed
scwood opened this issue Apr 18, 2023 · 2 comments

Comments

@scwood
Copy link

scwood commented Apr 18, 2023

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 value
  • updateColor: 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.

rtk_query_invalidate

@markerikson
Copy link
Collaborator

This sounds like it might be the same issue as #2203 and #3105 ?

Also see this potential PR:

@scwood
Copy link
Author

scwood commented Apr 19, 2023

#3105 does sound similar, and that PR does seem promising as a solution!

I suppose close this as duplicate or however you would like to handle it. Thanks for the links, we'll keep an eye on the release.

ndepaola added a commit to chilli-axe/mpc-autofill that referenced this issue May 18, 2023
bad ugly not good solution to the race condition on page load,
but it works perfectly so w/e

i'm delaying each query until the backend URL to query is specified

the (imo) correct solution here is to correctly invalidate tags
in the presence of a race condition. seems like there's a PR to do
that here: reduxjs/redux-toolkit#3116
but no movement on it for the last few months

related issue: reduxjs/redux-toolkit#3386
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants