@magento/peregrine 12.1.0-alpha.1 → 12.2.0-alpha.2

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,11 +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
@@ -18,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
                             }
@@ -39,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);

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
                 }
             }

package/lib/talons/CheckoutPage/OrderConfirmationPage/createAccount.gql.js

@@ -19,8 +19,10 @@ export const CREATE_ACCOUNT = gql`
         ) {
             # The createCustomer mutation returns a non-nullable CustomerOutput type
             # which requires that at least one of the sub fields be returned.
+
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
             customer {
-                id
+                email
             }
         }
     }
@@ -28,8 +30,8 @@ export const CREATE_ACCOUNT = gql`
 
 export const GET_CUSTOMER = gql`
     query GetCustomerAfterCheckout {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         customer {
-            id
             email
             firstname
             lastname
@@ -56,15 +58,17 @@ export const GET_CART_DETAILS = gql`
     query GetCartDetailsAfterCheckout($cartId: String!) {
         cart(cart_id: $cartId) {
             id
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
             items {
-                id
+                uid
                 prices {
                     price {
                         value
                     }
                 }
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
                 product {
-                    id
+                    uid
                     name
                     sku
                     small_image {
@@ -80,11 +84,13 @@ export const GET_CART_DETAILS = 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
                     }
                 }

package/lib/talons/CheckoutPage/PaymentInformation/creditCard.gql.js

@@ -99,7 +99,7 @@ export const SET_BILLING_ADDRESS = gql`
                     }
                 }
             }
-        ) @connection(key: "setBillingAddressOnCart") {
+        ) {
             cart {
                 id
                 billing_address {
@@ -143,7 +143,7 @@ export const SET_CC_DETAILS_ON_CART = gql`
                     }
                 }
             }
-        ) @connection(key: "setPaymentMethodOnCart") {
+        ) {
             cart {
                 id
                 selected_payment_method {

package/lib/talons/CheckoutPage/PaymentInformation/paymentInformation.gql.js

@@ -76,7 +76,7 @@ export const SET_BILLING_ADDRESS = gql`
                     }
                 }
             }
-        ) @connection(key: "setBillingAddressOnCart") {
+        ) {
             cart {
                 id
                 billing_address {
@@ -107,7 +107,7 @@ export const SET_FREE_PAYMENT_METHOD_ON_CART = gql`
     mutation setPaymentMethodOnCart($cartId: String!) {
         setPaymentMethodOnCart(
             input: { cart_id: $cartId, payment_method: { code: "free" } }
-        ) @connection(key: "setPaymentMethodOnCart") {
+        ) {
             cart {
                 id
                 selected_payment_method {

package/lib/talons/CheckoutPage/ShippingInformation/AddressForm/customerForm.gql.js

@@ -6,8 +6,7 @@ import { GET_DEFAULT_SHIPPING } from '../shippingInformation.gql';
 
 export const CREATE_CUSTOMER_ADDRESS_MUTATION = gql`
     mutation CreateCustomerAddress($address: CustomerAddressInput!) {
-        createCustomerAddress(input: $address)
-            @connection(key: "createCustomerAddress") {
+        createCustomerAddress(input: $address) {
             id
             ...CustomerAddressFragment
         }
@@ -27,8 +26,7 @@ export const UPDATE_CUSTOMER_ADDRESS_MUTATION = gql`
         $addressId: Int!
         $address: CustomerAddressInput!
     ) {
-        updateCustomerAddress(id: $addressId, input: $address)
-            @connection(key: "updateCustomerAddress") {
+        updateCustomerAddress(id: $addressId, input: $address) {
             id
         }
     }
@@ -36,8 +34,8 @@ export const UPDATE_CUSTOMER_ADDRESS_MUTATION = gql`
 
 export const GET_CUSTOMER_QUERY = gql`
     query GetCustomer {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         customer {
-            id
             default_shipping
             email
             firstname

package/lib/talons/CheckoutPage/ShippingInformation/AddressForm/guestForm.gql.js

@@ -11,8 +11,7 @@ export const SET_GUEST_SHIPPING_MUTATION = gql`
         $email: String!
         $address: CartAddressInput!
     ) {
-        setGuestEmailOnCart(input: { cart_id: $cartId, email: $email })
-            @connection(key: "setGuestEmailOnCart") {
+        setGuestEmailOnCart(input: { cart_id: $cartId, email: $email }) {
             cart {
                 id
             }
@@ -23,7 +22,7 @@ export const SET_GUEST_SHIPPING_MUTATION = gql`
                 cart_id: $cartId
                 shipping_addresses: [{ address: $address }]
             }
-        ) @connection(key: "setShippingAddressesOnCart") {
+        ) {
             cart {
                 id
                 ...ShippingInformationFragment
@@ -39,6 +38,15 @@ export const SET_GUEST_SHIPPING_MUTATION = gql`
     ${AvailablePaymentMethodsFragment}
 `;
 
+export const GET_EMAIL_AVAILABLE_QUERY = gql`
+    query IsEmailAvailable($email: String!) {
+        isEmailAvailable(email: $email) {
+            is_email_available
+        }
+    }
+`;
+
 export default {
-    setGuestShippingMutation: SET_GUEST_SHIPPING_MUTATION
+    setGuestShippingMutation: SET_GUEST_SHIPPING_MUTATION,
+    getEmailAvailableQuery: GET_EMAIL_AVAILABLE_QUERY
 };