Best practices to not continuously call update APIs from mobile client

Issue

I'm kinda stuck on how would be the best way to implement this functionality of my app: a user has a cart and can add or remove how many items he wants throw a stepper (+ and - buttons).

The cart is also saved on the backend so each stepper press (as of right now) makes a call to the update API on the backend.

This means that if the user presses quickly 30 times the API gets called 30 times. This would be a sample of my code (I'm using React Native for my mobile app):

const cartStore = useObservable(() => {
   cart: [],
   id: undefined,
   addItem(item) {
      cart.push(item);
      this.updateDynamoCart();
   },
   updateDynamoCart(
     if(!this.id) {
         createCart();
     }
     updateCart(this.cart);
   }
});

I feel mentioning that it's in a store and that I'm using aws-cli with Dynamo (calling APP Sync APIs could be useful for the question

So basically:

• I'm storing locally the cart values
• Updating the cart on the database each time my local cart gets updated

I know that having this approach I'll have these problems:

• My local cart might be unaligned with the database one if some call goes wrong
• I'm bombarding my client with useless API calls (I think 'useless')

I thought some other approaches but they brought bigger problems for the user in my opinion. For example:

Update the cart from the APPSync API response:

• The cart displaying to the user gets updated way to late from the user interaction

Subscription based updates

• Even if I'm not yet fully knowledgable to subscribe to a GraphQL query, I still think it will introduce the latency from the user interaction

I guess setting a timeout of 3 seconds from the user interaction and updating after that timeout expires (without getting overwritten by another interaction) would solve the "thousands of calls" but I'm not sure it's a best practice.

Can anyone point me in the right direction? I can't seem to find by googling it

PS: I'm not even sure the tags are fitting because I don't know where the problem would have to be addressed

Solution

First of all, I want to thank you for this question, this question is useful for other people,

Well, whenever we make an E-commerce app, this issue arises. if we manage the cart using API.

I have a way we can reduce the API calls.

First We need to add to the Add to cart button instead of the counter in our product details screen (When the user clicks add to the cart then we will call the API and that 1 item has been added to the cart.)

Second In the cart screen we will show the dropdown instead of the increment counter, If the user wants to update the quantity then he will select a new quantity from the dropdown like ( 0 (DELETE), 1,2,3,4,5 and others) and if the user select other then we will show manually input to add quantity

Or if we don't like the dropdown to choose quantity then we will show the pop-up when the user clicks on the plus button (+) should show a pop-up with the product and (-) count (+) and the user chooses 5 quantity products and close pop-up then we will call the API, it will also reduce API calling

Answered By - Shivo'ham