No longer does selective update for the cache

But still achieve the same result via local state update within the component.
SalesforceCommerceCloud · Mar 14, 2023 · 487c775 · 487c775
1 parent 3c47cf8
commit 487c775
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 41 deletions.
diff --git a/packages/commerce-sdk-react/src/hooks/ShopperCustomers/cache.ts b/packages/commerce-sdk-react/src/hooks/ShopperCustomers/cache.ts
@@ -135,32 +135,9 @@ export const cacheUpdateMatrix: CacheUpdateMatrix<Client> = {
     },
     updateCustomerPassword: noop,
     updateCustomerProductList: TODO('updateCustomerProductList'),
-    updateCustomerProductListItem(customerId, {parameters}, response) {
-        const {itemId, listId} = parameters
+    updateCustomerProductListItem(customerId, {parameters}) {
         return {
-            update: [
-                {queryKey: getCustomerProductListItem.queryKey(parameters)},
-                {
-                    // Also selectively update the lists
-                    queryKey: getCustomerProductLists.queryKey(parameters),
-                    updater: (oldData: ShopperCustomersTypes.CustomerProductListResult) => {
-                        return {
-                            ...oldData,
-                            data: oldData.data.map((list) =>
-                                list.id !== listId
-                                    ? list
-                                    : {
-                                          ...list,
-                                          customerProductListItems:
-                                              list.customerProductListItems?.map((item) =>
-                                                  item.id !== itemId ? item : response
-                                              )
-                                      }
-                            )
-                        }
-                    }
-                }
-            ],
+            update: [{queryKey: getCustomerProductListItem.queryKey(parameters)}],
             // TODO: Rather than invalidate, can we selectively update?
             invalidate: [
                 {queryKey: getCustomerProductList.queryKey(parameters)},

diff --git a/packages/template-retail-react-app/app/pages/account/wishlist/index.jsx b/packages/template-retail-react-app/app/pages/account/wishlist/index.jsx
@@ -59,37 +59,37 @@ const AccountWishlist = () => {
     }
 
     const handleItemQuantityChanged = async (quantity, item) => {
+        let isValidChange = false
         setSelectedItem(item.productId)
 
         const body = {
             ...item,
             quantity: parseInt(quantity)
         }
         // To meet expected schema, remove the custom `product` we added
-        // TODO: better way?
         delete body.product
 
-        updateCustomerProductListItem.mutate(
-            {
+        try {
+            await updateCustomerProductListItem.mutateAsync({
                 body,
                 parameters: {
                     customerId: customer.customerId,
                     itemId: item.id,
                     listId: wishListData?.id
                 }
-            },
-            {
-                onError: () => {
-                    toast({
-                        title: formatMessage(API_ERROR_MESSAGE),
-                        status: 'error'
-                    })
-                },
-                onSuccess: () => {
-                    setSelectedItem(undefined)
-                }
-            }
-        )
+            })
+            isValidChange = true
+            setSelectedItem(undefined)
+        } catch (err) {
+            toast({
+                title: formatMessage(API_ERROR_MESSAGE),
+                status: 'error'
+            })
+        }
+
+        // If true, the quantity picker would immediately update its number
+        // without waiting for the invalidated lists data to finish refetching
+        return isValidChange
     }
 
     const isPageLoading = wishListItems ? isProductsLoading : isWishListLoading