How to rollback multiple sequential calls to useMutate.mutate with optimistic updates?

[MHebes]

I have an input for numbers with up/down arrows.

When clicked, those arrows optimistically update the displayed text, and then call a mutation on the server. On error, it will rollback to the original value.

The problem is that when you have a persistent error condition, such as no network, and increment/decrement multiple times (e.g. by holding the button), each mutation tries to rollback to the previous value.

This results in a weird UX where you, for example, starting at 0, press "+" 10 times. The value changes to 10 optimistically.
Later, all the mutations fail:

• The first (0 -> 1) mutation reverts to 0
• The second (1 -> 2) mutation reverts to 1
• The third (2 -> 3) mutation reverts to 2
• etc.

Here is an example: https://codesandbox.io/s/broken-architecture-y7dqh?file=/src/index.js

If you check the "error" box (so that requests fail) and try clicking the up arrow spinner a few time, you'll see the bad UX.

Any advice on the best way to solve this?

I'm not even sure what the desired behavior is. Maybe when all the mutations are settled, rollback to the last "real" cache?

[TkDodo]

I guess you'd want debounced optimistic updates? I've implemented something along those lines some time ago (v2) with a checkbox. You avoid spamming the server with fast ui interactions. if you click the checkbox twice you don't even need to send anything at all because the value is still the same as before. On top of that, I disabled the checkbox while the request is in-flight just to be sure :)

https://codesandbox.io/s/sad-northcutt-syz0u

If that's not what you want, I guess one way would be to store the first value to rollback to as well as the number of running mutations in a ref, and then only perform the rollback to the first value after all mutations have finished. Ideally, the query invalidation in onSettled takes care of "eventual consistency", but if you have no internet at all this also doesn't help 😅