Prefetch/fetch happening at the same time immediate before item becomes inactive cancels both fetches #628
Unanswered
RJSchmertz
asked this question in
General
Replies: 1 comment
-
This is a pretty intense example, but I'm not quite understanding why you're checking for an unknown cart item before the query is actually resolved. See my example: https://codesandbox.io/s/practical-tharp-f0tgf?file=/src/Home.js |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Thanks a ton for react-query. We've switched a fairly large web app over to using it and it's working out pretty well.
I did run into an odd issue where a prefetch and a fetch are both initiated at the same time, then you change routes and that 'item' is now 'inactive', that both the prefetch and the fetch are canceled I think, and neither will retry again.
We've gotten around it because the check we were doing wasn't really what we wanted anyway, but still interested if this is a bug.
Scenario is
We have several prefetch for 'cartItems' in App.js
There are pages that use individual 'cartItem's
We had some checks on those individual pages making sure you're 'allowed' to be on that page.
Visit landing page (prefetchCartItem's happen)
go to an individual page (useCartItem is used)
That individual page had a check where if the cartItem was undefined, you weren't 'allowed' and would navigate you back to the landing page.
This check doesn't trigger in a normal navigation since it prefetched.
But, if you refresh that individual page, first render the cartItem is undefined, so it does redirect you to the landing page - after initiating the prefetch and normal fetch - since both just remounted.
But upon navigation, that cartitem never makes it into a 'query' in the dev tools.
So even now trying to navigate back to that individual page, since the item is undefined it just returns you back to the landing page indefinitely, and never tries to fetch the item again.
I've put together a codesandbox with the scenario.
I've also put together a video showing it, I've uploaded that in discord - https://discord.com/channels/719702312431386674/719702452861009930/725391801829032026
codesandbox: https://codesandbox.io/s/nice-minsky-1q0mb?file=/src/fetch.js
Visit Landing page
Click go to extra page (this works) and shows cart item 123
Refresh that page
It redirects you to landing page
Click go to extra page - it will fail.
If you have dev tools open you will see there is no entry for cartitem 123
That allowed check is probably not quite how you'd actually want this to work - but the underlying behavior is still odd
Beta Was this translation helpful? Give feedback.
All reactions