Unmounting CartForm cancels fetch

lorenzo-del-rosario commented 4 months ago

What is the location of your example repository?

https://github.com/Shopify/hydrogen-demo-store

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

latest

What version of Remix are you using?

No response

Steps to Reproduce

When we dispatch an action with CartForm (adjust line item quantity or remove item), if CartForm gets unmounted before receiving the response it cancels the request.

It's reproducible in the hydrogen demo store as well:

go to a product page
add item to. the cart
delete item from cart (or adjust line item quantity) and immediately close cart
open back cart and see that the item is still there (or the quantity didn't change)

Expected Behavior

Requests should be canceled only on subsequent requests (to avoid race conditions) but should be independent from the mounted state of the cart form.

Actual Behavior

On CartForm unmount the requests are being canceled.

grygielj commented 4 months ago

I've similar issue with CartForm.ACTIONS.LinesRemove- when i'm deleting line item action is being cancelled, because CartForm is being unmounted. Do you know what could be causing this? On the empty hydrogen starter I'm not facing this issue. This only occurs when useOptimisticCart hook is used. I'm not using vite

lorenzo-del-rosario commented 4 months ago

I've similar issue with CartForm.ACTIONS.LinesRemove- when i'm deleting line item action is being cancelled, because CartForm is being unmounted. Do you know what could be causing this? On the empty hydrogen starter I'm not facing this issue. This only occurs when useOptimisticCart hook is used. I'm not using vite

I think it's the default behaviour of the CartForm component. We've had this issue before the useOptimisticCart hook was released. We have put a temporary patch to it by keeping the cart drawer mounted also when closed. I haven't checked what happens if the user navigates away from the cart page while the fetch is still in progress.. I suppose it would cancel the request in that scenario as well.

blittle commented 4 months ago

Can you please try enabling the Remix future flag: v3_fetcherPersist. See this PR for an example: https://github.com/Shopify/hydrogen-demo-store/pull/69/files

Shopify / hydrogen