@magento/peregrine 12.0.0 → 12.2.0-alpha.1

package/lib/talons/RootComponents/Product/productDetailFragment.gql.js

@@ -3,20 +3,20 @@ import { gql } from '@apollo/client';
 export const ProductDetailsFragment = gql`
     fragment ProductDetailsFragment on ProductInterface {
         __typename
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         categories {
-            id
+            uid
             breadcrumbs {
-                category_id
+                category_uid
             }
         }
         description {
             html
         }
         id
+        uid
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         media_gallery_entries {
-            # id is deprecated and unused in our code, but lint rules require we
-            # request it if available
-            id
             uid
             label
             position
@@ -39,12 +39,43 @@ export const ProductDetailsFragment = gql`
         }
         stock_status
         url_key
+        custom_attributes {
+            selected_attribute_options {
+                attribute_option {
+                    uid
+                    label
+                    is_default
+                }
+            }
+            entered_attribute_value {
+                value
+            }
+            attribute_metadata {
+                uid
+                code
+                label
+                attribute_labels {
+                    store_code
+                    label
+                }
+                data_type
+                is_system
+                is_visible_on_front
+                entity_type
+                ui_input {
+                    ui_input_type
+                    is_html_allowed
+                }
+            }
+        }
         ... on ConfigurableProduct {
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
             configurable_options {
                 attribute_code
                 attribute_id
-                id
+                uid
                 label
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
                 values {
                     uid
                     default_label
@@ -65,12 +96,11 @@ export const ProductDetailsFragment = gql`
                     code
                     value_index
                 }
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
                 product {
-                    id
+                    uid
+                    # eslint-disable-next-line @graphql-eslint/require-id-when-available
                     media_gallery_entries {
-                        # id is deprecated and unused in our code, but lint rules require we
-                        # request it if available
-                        id
                         uid
                         disabled
                         file
@@ -87,6 +117,35 @@ export const ProductDetailsFragment = gql`
                             }
                         }
                     }
+                    custom_attributes {
+                        selected_attribute_options {
+                            attribute_option {
+                                uid
+                                label
+                                is_default
+                            }
+                        }
+                        entered_attribute_value {
+                            value
+                        }
+                        attribute_metadata {
+                            uid
+                            code
+                            label
+                            attribute_labels {
+                                store_code
+                                label
+                            }
+                            data_type
+                            is_system
+                            is_visible_on_front
+                            entity_type
+                            ui_input {
+                                ui_input_type
+                                is_html_allowed
+                            }
+                        }
+                    }
                 }
             }
         }

package/lib/talons/SearchPage/searchPage.gql.js

@@ -2,8 +2,9 @@ import { gql } from '@apollo/client';
 
 export const GET_PAGE_SIZE = gql`
     query getPageSize {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         storeConfig {
-            id
+            store_code
             grid_per_page
         }
     }
@@ -42,6 +43,7 @@ export const PRODUCT_SEARCH = gql`
         ) {
             items {
                 id
+                uid
                 name
                 price_range {
                     maximum_price {
@@ -56,7 +58,7 @@ export const PRODUCT_SEARCH = gql`
                     url
                 }
                 stock_status
-                type_id
+                __typename
                 url_key
             }
             page_info {
@@ -80,9 +82,23 @@ export const GET_FILTER_INPUTS = gql`
     }
 `;
 
+export const GET_SEARCH_AVAILABLE_SORT_METHODS = gql`
+    query getSearchAvailableSortMethods($search: String!) {
+        products(search: $search) {
+            sort_fields {
+                options {
+                    label
+                    value
+                }
+            }
+        }
+    }
+`;
+
 export default {
     getFilterInputsQuery: GET_FILTER_INPUTS,
     getPageSize: GET_PAGE_SIZE,
     getProductFiltersBySearchQuery: GET_PRODUCT_FILTERS_BY_SEARCH,
+    getSearchAvailableSortMethods: GET_SEARCH_AVAILABLE_SORT_METHODS,
     productSearchQuery: PRODUCT_SEARCH
 };

package/lib/talons/SearchPage/useSearchPage.js

@@ -25,6 +25,7 @@ export const useSearchPage = (props = {}) => {
         getFilterInputsQuery,
         getPageSize,
         getProductFiltersBySearchQuery,
+        getSearchAvailableSortMethods,
         productSearchQuery
     } = operations;
 
@@ -32,6 +33,15 @@ export const useSearchPage = (props = {}) => {
         fetchPolicy: 'cache-and-network',
         nextFetchPolicy: 'cache-first'
     });
+
+    const [getSortMethods, { data: sortData }] = useLazyQuery(
+        getSearchAvailableSortMethods,
+        {
+            fetchPolicy: 'cache-and-network',
+            nextFetchPolicy: 'cache-first'
+        }
+    );
+
     const pageSize = pageSizeData && pageSizeData.storeConfig.grid_per_page;
 
     const sortProps = useSort();
@@ -193,6 +203,16 @@ export const useSearchPage = (props = {}) => {
         }
     }, [currentSort, search, setCurrentPage]);
 
+    useEffect(() => {
+        if (inputText) {
+            getSortMethods({
+                variables: {
+                    search: inputText
+                }
+            });
+        }
+    }, [inputText, getSortMethods]);
+
     // Fetch category filters for when a user is searching in a category.
     const [getFilters, { data: filterData }] = useLazyQuery(
         getProductFiltersBySearchQuery,
@@ -224,7 +244,12 @@ export const useSearchPage = (props = {}) => {
 
     useScrollTopOnChange(currentPage);
 
+    const availableSortMethods = sortData
+        ? sortData.products.sort_fields.options
+        : null;
+
     return {
+        availableSortMethods,
         data,
         error,
         filters,

package/lib/talons/SignIn/signIn.gql.js

@@ -3,8 +3,8 @@ import { CheckoutPageFragment } from '../CheckoutPage/checkoutPageFragments.gql'
 
 export const GET_CUSTOMER = gql`
     query GetCustomerAfterSignIn {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         customer {
-            id
             email
             firstname
             lastname
@@ -35,10 +35,11 @@ export const MERGE_CARTS = gql`
         mergeCarts(
             source_cart_id: $sourceCartId
             destination_cart_id: $destinationCartId
-        ) @connection(key: "mergeCarts") {
+        ) {
             id
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
             items {
-                id
+                uid
             }
             ...CheckoutPageFragment
         }

package/lib/talons/SignIn/useSignIn.js

@@ -1,8 +1,6 @@
 import { useCallback, useRef, useState, useMemo } from 'react';
 import { useApolloClient, useMutation } from '@apollo/client';
 
-import { clearCartDataFromCache } from '../../Apollo/clearCartDataFromCache';
-import { clearCustomerDataFromCache } from '../../Apollo/clearCustomerDataFromCache';
 import mergeOperations from '../../util/shallowMerge';
 import { useCartContext } from '../../context/cart';
 import { useUserContext } from '../../context/user';
@@ -67,8 +65,8 @@ export const useSignIn = props => {
                 await setToken(token);
 
                 // Clear all cart/customer data from cache and redux.
-                await clearCartDataFromCache(apolloClient);
-                await clearCustomerDataFromCache(apolloClient);
+                await apolloClient.clearCacheData(apolloClient, 'cart');
+                await apolloClient.clearCacheData(apolloClient, 'checkout');
                 await removeCart();
 
                 // Create and get the customer's cart id.

package/lib/talons/Wishlist/WishlistDialog/wishlistDialog.gql.js

@@ -23,13 +23,14 @@ export const ADD_TO_WISHLIST = gql`
 
 export const GET_WISHLISTS = gql`
     query getWishlistsDialogData {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         storeConfig {
-            id
+            store_code
             enable_multiple_wishlists
             maximum_number_of_wishlists
         }
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         customer {
-            id
             wishlists {
                 id
                 name

package/lib/talons/WishlistPage/createWishlist.gql.js

@@ -12,8 +12,9 @@ export const CREATE_WISHLIST = gql`
 
 export const GET_MULTIPLE_WISHLISTS_ENABLED = gql`
     query getMultipleWishlistsEnabled {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         storeConfig {
-            id
+            store_code
             enable_multiple_wishlists
         }
     }

package/lib/talons/WishlistPage/useWishlistItem.js

@@ -81,8 +81,8 @@ export const useWishlistItem = props => {
             const selectedOptionsArray = selectedConfigurableOptions.map(
                 selectedOption => {
                     const {
-                        id: attributeId,
-                        value_id: selectedValueId
+                        configurable_product_option_uid: attributeId,
+                        configurable_product_option_value_uid: selectedValueId
                     } = selectedOption;
                     const configurableOption = configurableOptions.find(
                         option => option.attribute_id_v2 === attributeId

package/lib/talons/WishlistPage/wishlist.gql.js

@@ -5,8 +5,8 @@ import { WishlistItemFragment } from './wishlistItemFragments.gql';
 
 export const GET_CUSTOMER_WISHLIST = gql`
     query GetCustomerWishlist {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         customer {
-            id
             wishlists {
                 id
                 ...WishlistPageFragment
@@ -18,8 +18,8 @@ export const GET_CUSTOMER_WISHLIST = gql`
 
 export const GET_CUSTOMER_WISHLIST_ITEMS = gql`
     query getCustomerWishlist($id: ID!, $currentPage: Int) {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         customer {
-            id
             wishlist_v2(id: $id) {
                 id
                 items_v2(currentPage: $currentPage) {

package/lib/talons/WishlistPage/wishlistConfig.gql.ce.js

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

package/lib/talons/WishlistPage/wishlistConfig.gql.ee.js

@@ -2,8 +2,9 @@ import { gql } from '@apollo/client';
 
 export const GET_WISHLIST_CONFIG = gql`
     query GetWishlistConfigForWishlistPageEE {
+        # 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/WishlistPage/wishlistItemFragments.gql.js

@@ -3,8 +3,9 @@ import { gql } from '@apollo/client';
 export const WishlistItemFragment = gql`
     fragment WishlistItemFragment on WishlistItemInterface {
         id
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         product {
-            id
+            uid
             image {
                 label
                 url
@@ -20,9 +21,11 @@ export const WishlistItemFragment = gql`
             }
             sku
             stock_status
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
             ... on ConfigurableProduct {
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
                 configurable_options {
-                    id
+                    uid
                     attribute_code
                     attribute_id
                     attribute_id_v2

package/lib/talons/WishlistPage/wishlistPage.gql.js

@@ -4,8 +4,8 @@ import { WishlistPageFragment } from './wishlistFragment.gql';
 
 export const GET_CUSTOMER_WISHLIST = gql`
     query GetCustomerWishlist {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         customer {
-            id
             wishlists {
                 id
                 ...WishlistPageFragment

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magento/peregrine",
-  "version": "12.0.0",
+  "version": "12.2.0-alpha.1",
   "publishConfig": {
     "access": "public"
   },
@@ -15,12 +15,12 @@
   "bugs": {
     "url": "https://github.com/magento/pwa-studio/issues"
   },
-  "homepage": "https://github.com/magento/pwa-studio/tree/master/packages/peregrine#readme",
+  "homepage": "https://github.com/magento/pwa-studio/tree/main/packages/peregrine#readme",
   "dependencies": {
     "fast-glob": "~3.2.4"
   },
   "devDependencies": {
-    "@apollo/client": "~3.1.2",
+    "@apollo/client": "~3.4.0",
     "@magento/eslint-config": "~1.5.0",
     "@testing-library/react-hooks": "~5.0.3",
     "intl": "~1.2.5",
@@ -36,8 +36,8 @@
     "wait-for-expect": "~1.2.0"
   },
   "peerDependencies": {
-    "@apollo/client": "~3.1.2",
-    "@babel/runtime": "~7.4.2",
+    "@apollo/client": "~3.4.0",
+    "@babel/runtime": "~7.15.3",
     "informed": "~3.29.0",
     "react": "~17.0.1",
     "react-dom": "~17.0.1",
@@ -48,7 +48,7 @@
     "redux-actions": "~2.6.5"
   },
   "engines": {
-    "node": ">=10.x",
+    "node": ">=14.x",
     "yarn": ">=1.12.0"
   },
   "pwa-studio": {

package/lib/Apollo/clearStore.js

@@ -1,26 +0,0 @@
-/**
- * Wipes the apollo cache in memory and persistence.
- *
- * According to Apollo's docs you should only have to call client.clearStore
- * but if you use a persistence layer such as apollo-cache-persist you MUST
- * pause and purge the persistor's buffer _before_ calling clear store otherwise
- * the data is immediately replayed into the client store from the persistor.
- *
- * See: https://github.com/apollographql/apollo-cache-persist/issues/34#issuecomment-371177206
- *
- * @param {ApolloClient} client apollo client instance
- * @param {PersistorInstance} persistor persistor instance
- */
-export const clearStore = async (client, persistor) => {
-    // Pause automatic persistence.
-    persistor.pause();
-
-    // Delete everything in the storage provider.
-    await persistor.purge();
-
-    // Wipe the apollo store. Do not replay queries.
-    await client.clearStore();
-
-    // Resume automatic persistence.
-    persistor.resume();
-};

package/lib/Apollo/deleteCacheEntry.js

@@ -1,87 +0,0 @@
-import { CACHE_PERSIST_PREFIX } from '@magento/peregrine/lib/Apollo/constants';
-
-/**
- * Deletes specific entry/entries from the apollo cache and then tries to
- * persist the deletions.
- *
- * @param {ApolloClient} client apollo client instance
- * @param {Function} predicate a matching function
- */
-export const deleteCacheEntry = async (client, predicate) => {
-    await deleteActiveCacheEntry(client, predicate);
-    await deleteInactiveCachesEntry(client, predicate);
-};
-
-const deleteActiveCacheEntry = async (client, predicate) => {
-    // If there is no client or cache then just back out since it doesn't matter :D
-    if (
-        !client ||
-        !client.cache ||
-        !client.cache.data ||
-        !client.cache.data.data
-    ) {
-        if (process.env.NODE_ENV === 'development') {
-            console.warn(
-                'Apollo Cache entry deletion attempted without client or cache.'
-            );
-        }
-        return;
-    }
-
-    // Remove from the active cache.
-    Object.keys(client.cache.data.data).forEach(key => {
-        if (predicate(key)) {
-            client.cache.data.delete(key);
-        }
-    });
-
-    // Remove from ROOT_QUERY cache.
-    if (client.cache.data.data.ROOT_QUERY) {
-        Object.keys(client.cache.data.data.ROOT_QUERY).forEach(key => {
-            if (predicate(key)) {
-                client.cache.data.delete('ROOT_QUERY', key);
-            }
-        });
-    }
-
-    // Immediately persist the cache changes to the active cache storage.
-    if (client.persistor) {
-        await client.persistor.persist();
-    }
-};
-
-const deleteInactiveCachesEntry = async (client, predicate) => {
-    if (!client || !client.persistor || !globalThis.localStorage) return;
-
-    const activeApolloCacheLocalStorageKey =
-        client.persistor.persistor.storage.key;
-
-    const isAnInactiveApolloCache = ([key]) => {
-        return (
-            key.startsWith(CACHE_PERSIST_PREFIX) &&
-            key !== activeApolloCacheLocalStorageKey
-        );
-    };
-
-    const { localStorage } = globalThis;
-
-    Object.entries(localStorage)
-        .filter(isAnInactiveApolloCache)
-        .forEach(([inactiveCacheKey, inactiveCacheValue]) => {
-            const inactiveApolloCache = JSON.parse(inactiveCacheValue);
-
-            Object.keys(inactiveApolloCache).forEach(key => {
-                if (predicate(key)) {
-                    delete inactiveApolloCache[key];
-                }
-            });
-
-            // We're done deleting keys that match the predicate,
-            // but we've only mutated the object in memory.
-            // Write the updated inactive cache back out to localStorage.
-            localStorage.setItem(
-                inactiveCacheKey,
-                JSON.stringify(inactiveApolloCache)
-            );
-        });
-};