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
