How to deal with optimistic responses and multiple requests?

Hey there,
in our ecommerce project, we are using a lot of ± quantity inputs, which utilize optimistic responses. We observed that when user changes quantity of multiple products fast, the API may respond with incorrect quantity.

Video example here

Sandbox: Queries > Example app final (forked) - CodeSandbox

I wanted to ask you how would you suggest dealing with such cases?

I considered:

  • a) waiting, e.g., 150 ms after hitting the + or - button, before making a request. So if user clicks 3 times within 300 ms - only one request is sent
  • b) because my cart update mutation accepts array of items - if user changes quantity of e.g., 3 products within 400 ms - update all of them in single request
  • c) blocking interaction with other quantity input, if a query is in progress - while it seems the easiest, it can lead to poor user experience

I’m not really sure if any of those options will work fine with Apollo.

Hello! You’re right that this is tricky, because if the user clicks a bunch all at once to increment and decrement a value, you can’t be sure of the order in which those operations will be processed by the server. The last processed mutation will win in terms of hard-setting the back-end cart value. This also creates a large number of unnecessary network requests.

If you expect this frequency of interaction, waiting an amount of time after any cart change to then send all cart changes in a single mutation sounds like a solid strategy. Another similar strategy might be to check for local cart changes every 1 second (or any other interval), and send a single mutation if that state has changed since the previous reported cart state. These strategies all work fine with Apollo, because you can call a mutation’s mutate function in response to any sort of logic in your code.

1 Like