Is buffering mutations an anti-pattern ?

[skasyn]

Hello, I'm currently working on some sort of e-commerce site. Basically, we store client's cart on the backend and if a client wants to add an item, we send a mutation to check if the item is still available, then update the cart accordingly.

Everything is handled by react-query: mutation to update the cart ==> cart query and item availability queries are invalidated and refetched.

We have one issue: If someone spam clicks the + 1 item button, many mutation will be sent at the same time and will overwrite themselves, leading to undefined behavior, mainly getting more item than available.

• One solution would be to disable the -/+ 1 item while the cart is updating. But it doesnt feels as fast, is really useless for the majority of our clients and is bad for our clients with a slow network.

• We also thought that we could somehow buffer the mutation if someone is spamclicking the button so that when the user stops clicking, only one mutation will be sent with the number of desired products (it can't go further than the number of available products since a first verification is done client side with the last number of available products).

We think the second solution is interesting and we started giving some thought to it. But I have a feeling that we may be going against react-query. I didn't find much on the documentation / internet and I wanted to know if someone had already encountered that kind of issue before ?

[TkDodo]

One solution would be to disable the -/+ 1 item while the cart is updating. But it doesnt feels as fast, is really useless for the majority of our clients and is bad for our clients with a slow network.

yep, that's the easy way out, but UX is meh.

We also thought that we could somehow buffer the mutation if someone is spamclicking the button so that when the user stops clicking, only one mutation will be sent with the number of desired products (it can't go further than the number of available products since a first verification is done client side with the last number of available products).

this is something I have done in a playground once (v2, very old, sorry), have a look here: https://codesandbox.io/s/sad-northcutt-syz0u

it's basically just a debounce on the frontend on the value + a useEffect that then fires the real mutation. Maybe there is some way to make that with less code, like debounce the actual call to .mutate and read the latest value from a ref or so? codesandbox doesn't work for me right now, but I do think that this is an interesting approach.

on top, if the user clicks + twice, then - twice, you don't have to fire a mutation at all.

[skasyn]

Thanks a lot, I will look into it ! If I found a a implementation more concise, I'll post it here. Have a great week :)

[NWylynko]

yo @skasyn if you could post the code that would be amazing thanks