You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Here's a scenario. Suppose your React UI has two screens, one with a form and the other with the results of the form submission. When the user submits the form, he is immediately taken to the results screen, where he is likely to see a spinner for a second or two, as the submission is being processed by the server.
Now suppose — however practically unlikely this is — that the user can return to the previous screen with the form, and submit the form once more while the previous submission is still processed by the server.
Here is my analysis of the above scenario:
Screen 1 and screen 2 are two different components; so screen 2 would need to pick up whatever was started in screen 1.
A form submission doesn't really have any natural id that could be used as a cache key. I could use the value of some form field as a cache key, I suppose; but that's hacky, and there's no way to guarantee its uniqueness. Plus, even if such a unique value was used as a cache key when submitting the form in screen 1, there's no nice way for screen 2 to know what this unique cache key was.
Going by the docs, one might use an RTK query mutation with a fixedCacheKey option to pick up in one component a cache item created by another one.
However, there is, technically, still a chance, however negligible, that the user can return to screen 1 and resubmit the form with different data while the previous request is still in flight, in which case the fixed cache key would result in undesirable behavior.
The docs mention a getRunningOperationPromise api, but it requires a cache key, which, like I said above, I don't really have a good way of creating.
What I would actually like is to be able to somehow query in Screen 2 whether the form submission endpoint has any ongoing requests; and if does, then to be notified somehow when they are all completed.
Is there a way to achieve something like this idiomatically with RTK query and React? I've been banging my head against the docs for a while now, but haven't been able to come up with a good solution other than to manually set up a requests counter in another redux slice, which looks ugly.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Here's a scenario. Suppose your React UI has two screens, one with a form and the other with the results of the form submission. When the user submits the form, he is immediately taken to the results screen, where he is likely to see a spinner for a second or two, as the submission is being processed by the server.
Now suppose — however practically unlikely this is — that the user can return to the previous screen with the form, and submit the form once more while the previous submission is still processed by the server.
Here is my analysis of the above scenario:
fixedCacheKey
option to pick up in one component a cache item created by another one.getRunningOperationPromise
api, but it requires a cache key, which, like I said above, I don't really have a good way of creating.Is there a way to achieve something like this idiomatically with RTK query and React? I've been banging my head against the docs for a while now, but haven't been able to come up with a good solution other than to manually set up a requests counter in another redux slice, which looks ugly.
Beta Was this translation helpful? Give feedback.
All reactions