@magento/peregrine 12.0.0 → 12.2.0-alpha.1

package/lib/talons/CartPage/ProductListing/EditModal/productForm.gql.js

@@ -7,6 +7,7 @@ const GET_CONFIGURABLE_OPTIONS = gql`
         products(filter: { sku: { eq: $sku } }) {
             items {
                 id
+                uid
                 ...ProductFormFragment
             }
         }
@@ -17,15 +18,17 @@ const GET_CONFIGURABLE_OPTIONS = gql`
 const UPDATE_QUANTITY_MUTATION = gql`
     mutation UpdateCartItemQuantity(
         $cartId: String!
-        $cartItemId: Int!
+        $cartItemId: ID!
         $quantity: Float!
     ) {
         updateCartItems(
             input: {
                 cart_id: $cartId
-                cart_items: [{ cart_item_id: $cartItemId, quantity: $quantity }]
+                cart_items: [
+                    { cart_item_uid: $cartItemId, quantity: $quantity }
+                ]
             }
-        ) @connection(key: "updateCartItems") {
+        ) {
             cart {
                 id
                 ...CartPageFragment
@@ -38,7 +41,7 @@ const UPDATE_QUANTITY_MUTATION = gql`
 const UPDATE_CONFIGURABLE_OPTIONS_MUTATION = gql`
     mutation UpdateConfigurableOptions(
         $cartId: String!
-        $cartItemId: Int!
+        $cartItemId: ID!
         $parentSku: String!
         $variantSku: String!
         $quantity: Float!
@@ -53,15 +56,15 @@ const UPDATE_CONFIGURABLE_OPTIONS_MUTATION = gql`
                     }
                 ]
             }
-        ) @connection(key: "addConfigurableProductsToCart") {
+        ) {
             cart {
                 id
             }
         }
 
         removeItemFromCart(
-            input: { cart_id: $cartId, cart_item_id: $cartItemId }
-        ) @connection(key: "removeItemFromCart") {
+            input: { cart_id: $cartId, cart_item_uid: $cartItemId }
+        ) {
             cart {
                 id
                 ...CartPageFragment

package/lib/talons/CartPage/ProductListing/EditModal/productFormFragment.gql.js

@@ -1,14 +1,17 @@
 import { gql } from '@apollo/client';
 
 export const ProductFormFragment = gql`
+    # eslint-disable-next-line @graphql-eslint/require-id-when-available
     fragment ProductFormFragment on ProductInterface {
-        id
+        uid
         sku
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         ... on ConfigurableProduct {
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
             configurable_options {
                 attribute_code
                 attribute_id
-                id
+                uid
                 label
                 values {
                     default_label
@@ -29,8 +32,9 @@ export const ProductFormFragment = gql`
                     code
                     value_index
                 }
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
                 product {
-                    id
+                    uid
                     price {
                         regularPrice {
                             amount {

package/lib/talons/CartPage/ProductListing/EditModal/useProductForm.js

@@ -90,6 +90,7 @@ export const useProductForm = props => {
     const handleOptionSelection = useCallback(
         (optionId, selection) => {
             const nextOptionSelections = new Map([...optionSelections]);
+
             const initialSelection = cartItem.configurable_options.find(
                 option => option.id == optionId
             );
@@ -156,7 +157,7 @@ export const useProductForm = props => {
                     await updateConfigurableOptions({
                         variables: {
                             cartId,
-                            cartItemId: cartItem.id,
+                            cartItemId: cartItem.uid,
                             parentSku: cartItem.product.sku,
                             variantSku: selectedVariant.product.sku,
                             quantity: formValues.quantity
@@ -168,7 +169,7 @@ export const useProductForm = props => {
                     await updateItemQuantity({
                         variables: {
                             cartId,
-                            cartItemId: cartItem.id,
+                            cartItemId: cartItem.uid,
                             quantity: formValues.quantity
                         }
                     });

package/lib/talons/CartPage/ProductListing/product.gql.js

@@ -2,8 +2,9 @@ import { gql } from '@apollo/client';
 
 export const GET_STORE_CONFIG = gql`
     query getStoreConfigForCartPage {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         storeConfig {
-            id
+            store_code
             product_url_suffix
             configurable_thumbnail_source
         }

package/lib/talons/CartPage/ProductListing/productListing.gql.ce.js

@@ -3,8 +3,9 @@ import { ProductListingFragment } from './productListingFragments.gql';
 
 export const GET_WISHLIST_CONFIG = gql`
     query GetWishlistConfigForCartPageCE {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         storeConfig {
-            id
+            store_code
             magento_wishlist_general_is_enabled
         }
     }

package/lib/talons/CartPage/ProductListing/productListing.gql.ee.js

@@ -3,8 +3,9 @@ import { ProductListingFragment } from './productListingFragments.gql';
 
 export const GET_WISHLIST_CONFIG = gql`
     query GetWishlistConfigForCartPageEE {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         storeConfig {
-            id
+            store_code
             magento_wishlist_general_is_enabled
             enable_multiple_wishlists
         }

package/lib/talons/CartPage/ProductListing/productListingFragments.gql.js

@@ -3,10 +3,12 @@ import { gql } from '@apollo/client';
 export const ProductListingFragment = gql`
     fragment ProductListingFragment on Cart {
         id
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         items {
-            id
+            uid
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
             product {
-                id
+                uid
                 name
                 sku
                 url_key
@@ -17,13 +19,15 @@ export const ProductListingFragment = gql`
                     url
                 }
                 stock_status
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
                 ... on ConfigurableProduct {
                     variants {
                         attributes {
                             uid
                         }
+                        # eslint-disable-next-line @graphql-eslint/require-id-when-available
                         product {
-                            id
+                            uid
                             small_image {
                                 url
                             }
@@ -38,12 +42,18 @@ export const ProductListingFragment = gql`
                 }
             }
             quantity
+            errors {
+                code
+                message
+            }
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
             ... on ConfigurableCartItem {
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
                 configurable_options {
                     id
-                    configurable_product_option_value_uid
+                    configurable_product_option_uid
                     option_label
-                    value_id
+                    configurable_product_option_value_uid
                     value_label
                 }
             }

package/lib/talons/CartPage/ProductListing/useProduct.js

@@ -107,13 +107,20 @@ export const useProduct = props => {
         updateItemLoading
     ]);
 
+    useEffect(() => {
+        if (item.errors) {
+            setDisplayError(true);
+        }
+    }, [item.errors]);
+
     const derivedErrorMessage = useMemo(() => {
         return (
             (displayError &&
                 deriveErrorMessage([updateError, removeItemError])) ||
+            deriveErrorMessage([...(item.errors || [])]) ||
             ''
         );
-    }, [displayError, removeItemError, updateError]);
+    }, [displayError, removeItemError, updateError, item.errors]);
 
     const handleEditItem = useCallback(() => {
         setActiveEditItem(item);
@@ -128,14 +135,14 @@ export const useProduct = props => {
             await removeItemFromCart({
                 variables: {
                     cartId,
-                    itemId: item.id
+                    itemId: item.uid
                 }
             });
         } catch (err) {
             // Make sure any errors from the mutation are displayed.
             setDisplayError(true);
         }
-    }, [cartId, item.id, removeItemFromCart]);
+    }, [cartId, item.uid, removeItemFromCart]);
 
     const handleUpdateItemQuantity = useCallback(
         async quantity => {
@@ -143,7 +150,7 @@ export const useProduct = props => {
                 await updateItemQuantity({
                     variables: {
                         cartId,
-                        itemId: item.id,
+                        itemId: item.uid,
                         quantity
                     }
                 });
@@ -152,7 +159,7 @@ export const useProduct = props => {
                 setDisplayError(true);
             }
         },
-        [cartId, item.id, updateItemQuantity]
+        [cartId, item.uid, updateItemQuantity]
     );
 
     useEffect(() => {

package/lib/talons/CartPage/ProductListing/useProductListing.js

@@ -54,13 +54,14 @@ export const useProductListing = (props = {}) => {
     }, [cartId, fetchProductListing]);
 
     let items = [];
-    if (called && !error && !loading) {
-        items = data.cart.items;
+    if (called && !loading) {
+        items = data?.cart?.items || [];
     }
 
     return {
         activeEditItem,
         isLoading: !!loading,
+        error,
         items,
         setActiveEditItem,
         wishlistConfig
@@ -89,6 +90,7 @@ export const useProductListing = (props = {}) => {
  *
  * @property {Object} activeEditItem The product item currently being edited
  * @property {boolean} isLoading True if the query to get the product listing is still in progress. False otherwise.
+ * @property {Error|null} error An array of graphql errors
  * @property {Array<Object>} items A list of products in a cart
  * @property {function} setActiveEditItem Function for setting the current item to edit
  *

package/lib/talons/CartPage/useCartPage.js

@@ -36,15 +36,16 @@ export const useCartPage = (props = {}) => {
         getCartDetailsQuery,
         {
             fetchPolicy: 'cache-and-network',
-            nextFetchPolicy: 'cache-first'
+            nextFetchPolicy: 'cache-first',
+            errorPolicy: 'all'
         }
     );
 
-    const hasItems = !!(data && data.cart.total_quantity);
+    const hasItems = !!data?.cart?.total_quantity;
     const shouldShowLoadingIndicator = called && loading && !hasItems;
 
     const cartItems = useMemo(() => {
-        return (data && data.cart.items) || [];
+        return data?.cart?.items || [];
     }, [data]);
 
     const onAddToWishlistSuccess = useCallback(successToastProps => {

package/lib/talons/CategoryList/categoryList.gql.js

@@ -1,31 +1,39 @@
+/* Deprecated in PWA-12.1.0*/
+
 import { gql } from '@apollo/client';
 
 export const GET_STORE_CONFIG_DATA = gql`
     query GetStoreConfigForCategoryList {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         storeConfig {
-            id
+            store_code
             category_url_suffix
         }
     }
 `;
 
 export const GET_CATEGORY_LIST = gql`
-    query GetCategoryList($id: Int!) {
-        category(id: $id) {
-            id
-            children {
-                id
-                name
-                url_key
-                url_path
-                children_count
-                path
-                image
-                productImagePreview: products(pageSize: 1) {
-                    items {
-                        id
-                        small_image {
-                            url
+    query GetCategoryList($id: String!) {
+        categories(filters: { category_uid: { in: [$id] } }) {
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            items {
+                uid
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                children {
+                    uid
+                    name
+                    url_key
+                    url_path
+                    children_count
+                    path
+                    image
+                    productImagePreview: products(pageSize: 1) {
+                        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                        items {
+                            uid
+                            small_image {
+                                url
+                            }
                         }
                     }
                 }

package/lib/talons/CategoryList/useCategoryList.js

@@ -1,3 +1,5 @@
+/* Deprecated in PWA-12.1.0*/
+
 import { useQuery } from '@apollo/client';
 
 import mergeOperations from '../../util/shallowMerge';
@@ -35,7 +37,10 @@ export const useCategoryList = props => {
 
     return {
         childCategories:
-            (data && data.category && data.category.children) || null,
+            (data &&
+                data.categories.items[0] &&
+                data.categories.items[0].children) ||
+            null,
         storeConfig,
         error,
         loading

package/lib/talons/CategoryList/useCategoryTile.js

@@ -1,3 +1,5 @@
+/* Deprecated in PWA-12.1.0*/
+
 import { useMemo } from 'react';
 import useInternalLink from '../../hooks/useInternalLink';
 

package/lib/talons/CategoryTree/categoryTree.gql.js

@@ -2,29 +2,35 @@ import { gql } from '@apollo/client';
 
 export const GET_CATEGORY_URL_SUFFIX = gql`
     query GetStoreConfigForCategoryTree {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         storeConfig {
-            id
+            store_code
             category_url_suffix
         }
     }
 `;
 
 export const GET_NAVIGATION_MENU = gql`
-    query GetNavigationMenu($id: Int!) {
-        category(id: $id) {
-            id
-            name
-            children {
+    query GetNavigationMenu($id: String!) {
+        categories(filters: { category_uid: { in: [$id] } }) {
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            items {
+                uid
+                name
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                children {
+                    children_count
+                    uid
+                    include_in_menu
+                    name
+                    position
+                    url_path
+                    url_suffix
+                }
                 children_count
-                id
                 include_in_menu
-                name
-                position
                 url_path
-                url_suffix
             }
-            include_in_menu
-            url_path
         }
     }
 `;

package/lib/talons/CategoryTree/useCategoryBranch.js

@@ -12,7 +12,7 @@ import { useCallback } from 'react';
  */
 export const useCategoryBranch = props => {
     const { category, setCategoryId } = props;
-    const { id, include_in_menu } = category;
+    const { uid: id, include_in_menu } = category;
 
     // `include_in_menu` is undefined when Magento <= 2.3.1
     const exclude = include_in_menu === 0;

package/lib/talons/CategoryTree/useCategoryTree.js

@@ -54,12 +54,12 @@ export const useCategoryTree = props => {
 
     // update redux with fetched categories
     useEffect(() => {
-        if (data && data.category) {
-            updateCategories(data.category);
+        if (data && data.categories.items[0]) {
+            updateCategories(data.categories.items[0]);
         }
     }, [data, updateCategories]);
 
-    const rootCategory = data && data.category;
+    const rootCategory = data && data.categories.items[0];
 
     const { children = [] } = rootCategory || {};
 
@@ -72,7 +72,7 @@ export const useCategoryTree = props => {
             rootCategory.include_in_menu &&
             rootCategory.url_path
         ) {
-            childCategories.set(rootCategory.id, {
+            childCategories.set(rootCategory.uid, {
                 category: rootCategory,
                 isLeaf: true
             });
@@ -81,7 +81,7 @@ export const useCategoryTree = props => {
         children.map(category => {
             if (category.include_in_menu) {
                 const isLeaf = !parseInt(category.children_count);
-                childCategories.set(category.id, { category, isLeaf });
+                childCategories.set(category.uid, { category, isLeaf });
             }
         });
 

package/lib/talons/CheckoutPage/AddressBook/addressBook.gql.js

@@ -6,8 +6,8 @@ import { ShippingInformationFragment } from '../ShippingInformation/shippingInfo
 
 export const GET_CUSTOMER_ADDRESSES = gql`
     query GetCustomerAddresses {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         customer {
-            id
             addresses {
                 id
                 ...CustomerAddressFragment

package/lib/talons/CheckoutPage/BillingAddress/billingAddress.gql.js

@@ -86,7 +86,7 @@ export const SET_BILLING_ADDRESS = gql`
                     }
                 }
             }
-        ) @connection(key: "setBillingAddressOnCart") {
+        ) {
             cart {
                 id
                 billing_address {

package/lib/talons/CheckoutPage/ItemsReview/__fixtures__/cartItems.js

@@ -18,16 +18,16 @@ export default {
                 quantity: 3,
                 configurable_options: [
                     {
-                        id: 179,
+                        configurable_product_option_uid: 179,
                         option_label: 'Fashion Color',
-                        value_id: 18,
+                        configurable_product_option_value_uid: 18,
                         value_label: 'Peach',
                         __typename: 'SelectedConfigurableOption'
                     },
                     {
-                        id: 182,
+                        configurable_product_option_uid: 182,
                         option_label: 'Fashion Size',
-                        value_id: 27,
+                        configurable_product_option_value_uid: 27,
                         value_label: 'M',
                         __typename: 'SelectedConfigurableOption'
                     }
@@ -49,16 +49,16 @@ export default {
                 quantity: 1,
                 configurable_options: [
                     {
-                        id: 179,
+                        configurable_product_option_uid: 179,
                         option_label: 'Fashion Color',
-                        value_id: 21,
+                        configurable_product_option_value_uid: 21,
                         value_label: 'Rain',
                         __typename: 'SelectedConfigurableOption'
                     },
                     {
-                        id: 182,
+                        configurable_product_option_uid: 182,
                         option_label: 'Fashion Size',
-                        value_id: 29,
+                        configurable_product_option_value_uid: 29,
                         value_label: 'XS',
                         __typename: 'SelectedConfigurableOption'
                     }
@@ -80,16 +80,16 @@ export default {
                 quantity: 3,
                 configurable_options: [
                     {
-                        id: 179,
+                        configurable_product_option_uid: 179,
                         option_label: 'Fashion Color',
-                        value_id: 20,
+                        configurable_product_option_value_uid: 20,
                         value_label: 'Lilac',
                         __typename: 'SelectedConfigurableOption'
                     },
                     {
-                        id: 182,
+                        configurable_product_option_uid: 182,
                         option_label: 'Fashion Size',
-                        value_id: 26,
+                        configurable_product_option_value_uid: 26,
                         value_label: 'L',
                         __typename: 'SelectedConfigurableOption'
                     }

package/lib/talons/CheckoutPage/ItemsReview/itemsReview.gql.js

@@ -4,8 +4,9 @@ import { ItemsReviewFragment } from './itemsReviewFragments.gql';
 
 export const GET_CONFIGURABLE_THUMBNAIL_SOURCE = gql`
     query getConfigurableThumbnailSource {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         storeConfig {
-            id
+            store_code
             configurable_thumbnail_source
         }
     }

package/lib/talons/CheckoutPage/ItemsReview/itemsReviewFragments.gql.js

@@ -4,21 +4,25 @@ export const ItemsReviewFragment = gql`
     fragment ItemsReviewFragment on Cart {
         id
         total_quantity
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         items {
-            id
+            uid
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
             product {
-                id
+                uid
                 name
                 thumbnail {
                     url
                 }
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
                 ... on ConfigurableProduct {
                     variants {
                         attributes {
                             uid
                         }
+                        # eslint-disable-next-line @graphql-eslint/require-id-when-available
                         product {
-                            id
+                            uid
                             thumbnail {
                                 url
                             }
@@ -27,11 +31,13 @@ export const ItemsReviewFragment = gql`
                 }
             }
             quantity
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
             ... on ConfigurableCartItem {
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
                 configurable_options {
-                    id
+                    configurable_product_option_uid
                     option_label
-                    value_id
+                    configurable_product_option_value_uid
                     value_label
                 }
             }