aws graphql content update shopping cart - amazon-web-services

Question

I can increase and decrease item quantity from the app in sync with the graphql without any issue. the problem here is when i add a new item it appears in the graphql but it doesn't show up on the app unless i press save ctrl + s, and the same happens when i delete item it gets deleted on the graphql but it disappears from the app only when i press save or ctrl + s.
this is the product details screen and how i add items to cart, and it works fine without any issue and items get added to graphql when i call onAddToCart function
import React, {useState, useEffect} from "react";
import { View, Text, Image, StyleSheet, FlatList, TouchableOpacity, Alert} from 'react-native';
import Icon from 'react-native-vector-icons/AntDesign';
import Colors from "../../constants/Colors";
import { Auth , Hub} from "aws-amplify";
import { API, graphqlOperation } from 'aws-amplify';
import {getProduct } from '../graphql/queries';
import Card from "../../component/Card";
import {createCartItems} from '../graphql/mutations';
const [getProducts, setGetProducts] = useState([])
const [user, setUser] = useState(undefined)
const prodId = route.params;
const [quantity, setQuantity] = useState(1);
useEffect(()=>{
fetchProducts();
},[])
const fetchProducts = async ()=>{
const productsData = await API.graphql(graphqlOperation(getProduct, {id: prodId.productId}))
setGetProducts(productsData.data.getProduct)const checkUser = async ()=>{
try {
const authUser = await Auth.currentAuthenticatedUser({bypassCache: true})
// console.log(authUser)
setUser(authUser)
} catch (error) {
setUser(null)
}
}
useEffect(()=>{
checkUser();
},[])
useEffect(() => {
const listener = data => {
if (data.payload.event === 'signIn' || data.payload.event === 'signOut') {
checkUser();
}
};
Hub.listen('auth', listener);
return () => Hub.remove('auth', listener);
}, []);
const onAddToCart = async ()=>{
const userData = await Auth.currentAuthenticatedUser();
const newCartItem = {
userId: userData.attributes.sub,
productId: getProducts.id,
productPrice: getProducts.price,
productTitle: getProducts.title,
productImage: getProducts.image,
quantity: quantity,
}
API.graphql(graphqlOperation(createCartItems, {input: newCartItem}))
if(user === undefined || !user){
Alert.alert(
'خطأ تسجيل الدخول',
'لابد من تسجيل الدخول للأستمرار',
[
{
text : 'سجل الدخول',
onPress: ()=> navigation.navigate('SignIn')
},
{
text: 'اغلاق'
}
]
)
}else{
navigation.navigate('CartItem')
}
}
useEffect(() => {
const unsubscribe = navigation.addListener('focus', () => {
setQuantity(1);
});
return unsubscribe;
}, [navigation]);
return(
<View style={styles.container}>
<View style={styles.headerImageView}>
<Card image={{uri: getProducts.image}} promotion={getProducts.promotionRate} />
</View>
<View style={styles.descriptionPriceView}>
<Text style={styles.price}>{getProducts.price} ج.م </Text>
<Text style={styles.descriptionText}>{getProducts.description}</Text>
</View>
<View style={styles.quantity}>
<Text style={styles.quantityText}>الكمية</Text>
<Text style={styles.quantityText}>{quantity}</Text>
</View>
<View style={styles.share}>
<TouchableOpacity>
<Image style={{width: 30, height: 30, margin: 10}} source={{uri: 'https://firebasestorage.googleapis.com/v0/b/test-5c03d.appspot.com/o/NakoA%2FLogos%2Ffacebook.png?alt=media&token=6ba4cb45-4f42-42f5-b5c7-2063eeffd1a8'}}/>
</TouchableOpacity>
<TouchableOpacity>
<Image style={{width: 30, height: 30, margin: 10}} source={{uri: 'https://firebasestorage.googleapis.com/v0/b/test-5c03d.appspot.com/o/NakoA%2FLogos%2Finstagram.png?alt=media&token=f06f3b53-f026-43f0-a855-8ace6ed7b1b8'}}/>
</TouchableOpacity>
<TouchableOpacity>
<Icon name="sharealt" size={30} color="black" />
</TouchableOpacity>
</View>
<View style={styles.bottomAddToCartView}>
<View>
<TouchableOpacity onPress={onAddToCart}>
<Text style={styles.bottomAddToCartText}>أضف للسلة</Text>
</TouchableOpacity>
</View>
<View style={styles.addQuantity}>
<TouchableOpacity onPress={()=>{
setQuantity(Math.max(quantity - 1, 1))
}}>
<Text style={styles.minProd}>-</Text>
</TouchableOpacity>
<Text style={styles.numProd}>{quantity}</Text>
<TouchableOpacity onPress={()=>{
setQuantity(Math.min(quantity + 1, 100))
}}>
<Text style={styles.plusProd}>+</Text>
</TouchableOpacity>
</View>
</View>
</View>
)};
this is the CartItem screen
import React, {useEffect, useState} from "react";
import { View, Text, Image, StyleSheet, FlatList } from 'react-native';
import { Auth } from "aws-amplify";
import Colors from "../../constants/Colors";
import { DataStore} from "aws-amplify";
import ItemQuantity from '../../component/ItemQuantity';
import {CartItems} from '../models'
const CartItem = ()=>{
const [cartItem, setCartItem] = useState([]);
const [user, setUser] = useState('');
useEffect(()=>{
fetchCartItem();
userData();
},[])
const fetchCartItem = async ()=>{
try {
const cartitemsData = await DataStore.query(
CartItems, c=>c.userId("eq", user).quantity("gt", 0)
)
setCartItem(cartitemsData)
} catch (error) {
console.log(error)}}
return(
<View style={styles.screen}>
<FlatList data={cartItem} renderItem={({item})=>{
return(
<View style={styles.container}>
<View style={styles.cardView}>
<View style={styles.imageView}>
<Image style={styles.image} source={{uri: item.productImage}} />
</View>
<View style={styles.detailsView}>
<Text style={styles.titl}>{item.productTitle}</Text>
<Text style={styles.price}>{item.productPrice} ج.م </Text>
</View>
</View>
<ItemQuantity quantityItem={item.quantity}
updatedItemId={item.id}
userId={item.userId}
productID={item.productID}
productPrice={item.productPrice}
productTitle={item.productTitle}
productImage={item.productImage}
/>
</View>)}}/>
</View>)};
this is itemQuantity componenet
import React, {useState, useEffect} from "react";
import {View, Text, TouchableOpacity, StyleSheet} from 'react-native'
import { AntDesign } from '#expo/vector-icons';
import { DataStore } from "aws-amplify";
import { CartItems } from "../src/models";
const ItemQuantity = ({quantityItem, updatedItemId})=>{
const [quantity, setQuantity] = useState(quantityItem);
const onMinusPressed = ()=>{
setQuantity(Math.max(1, quantity - 1))
};
useEffect(()=>{fetchUpdatedCartItemPlus();},[quantity])
const fetchUpdatedCartItemPlus= async()=>{
const original = await DataStore.query(CartItems, updatedItemId)
await DataStore.save(CartItems.copyOf(original, updated=>{
updated.quantity = quantity
}))};
return(
<View style={styles.quantity}>
<TouchableOpacity onPress={onMinusPressed}>
<AntDesign name={'minuscircleo'} size={24} color="black" />
</TouchableOpacity>
<TouchableOpacity onPress={cartitemDelete}>
<AntDesign name={'delete'} size={24} color="black" />
</TouchableOpacity>
<Text style={styles.itemQuantity}>{quantity}</Text>
<TouchableOpacity onPress={onPlusPressed}>
<AntDesign name="pluscircleo" size={24} color="black" />
</TouchableOpacity>
</View>
)};