Remove variants field on product listing to improve perf (GCOM-1213)

.changeset/silent-clouds-learn.md

@@ -0,0 +1,6 @@
+---
+'@graphcommerce/magento-product-configurable': minor
+'@graphcommerce/magento-product': minor
+---
+
+List items will not retrieve variants anymore.

packages/magento-product-configurable/components/ProductListItemConfigurable/ProductListItemConfigurable.graphql

@@ -13,19 +13,4 @@ fragment ProductListItemConfigurable on ConfigurableProduct @inject(into: ["Prod
       }
     }
   }
-  variants {
-    attributes {
-      value_index
-      uid
-      code
-    }
-    product {
-      uid
-      sku
-      name
-      small_image {
-        ...ProductImage
-      }
-    }
-  }
 }

packages/magento-product-configurable/components/ProductListItemConfigurable/ProductListItemConfigurable.tsx

@@ -8,9 +8,7 @@ import {
 import { SwatchList } from '../../SwatchList'
 import { ProductListItemConfigurableFragment } from './ProductListItemConfigurable.gql'
 
-export type ProductListItemConfigurableActionProps = ProductListItemConfigurableFragment & {
-  variant?: NonNullable<ProductListItemConfigurableFragment['variants']>[0]
-}
+export type ProductListItemConfigurableActionProps = ProductListItemConfigurableFragment
 
 export type ProdustListItemConfigurableProps = ProductListItemConfigurableFragment &
   ProductListItemProps & {
@@ -19,7 +17,6 @@ export type ProdustListItemConfigurableProps = ProductListItemConfigurableFragme
 
 export function ProductListItemConfigurable(props: ProdustListItemConfigurableProps) {
   const {
-    variants,
     configurable_options,
     children,
     swatchLocations = { bottomLeft: [], bottomRight: [], topLeft: [], topRight: [] },
@@ -50,19 +47,19 @@ export function ProductListItemConfigurable(props: ProdustListItemConfigurablePr
     if (!selected[attr]) selected[attr] = values
   })
 
-  const matchingVariants = variants?.filter(
-    (variant) =>
-      variant?.attributes?.filter(
-        (attribute) =>
-          selected[attribute?.code ?? ''] !== undefined &&
-          selected[attribute?.code ?? ''].includes(String(attribute?.value_index)),
-      ).length,
-  )
+  // const matchingVariants = variants?.filter(
+  //   (variant) =>
+  //     variant?.attributes?.filter(
+  //       (attribute) =>
+  //         selected[attribute?.code ?? ''] !== undefined &&
+  //         selected[attribute?.code ?? ''].includes(String(attribute?.value_index)),
+  //     ).length,
+  // )
 
   return (
     <ProductListItem
       {...configurableProduct}
-      small_image={matchingVariants?.[0]?.product?.small_image ?? configurableProduct.small_image}
+      small_image={configurableProduct.small_image}
       topLeft={
         <>
           {topLeft}

packages/magento-product-configurable/graphql/ConfigurableOptions.graphql

@@ -1,43 +1,18 @@
 fragment ConfigurableOptions on ConfigurableProduct @injectable {
-  __typename
-  uid
-  sku
-  name
-  url_key
-  price_range {
-    minimum_price {
-      final_price {
-        ...Money
-      }
-      regular_price {
-        ...Money
-      }
-    }
-  }
-  configurable_options {
-    attribute_code
-    uid
-    label
-    position
-    use_default
-    values {
-      ...ConfigurableOptionValue
-    }
-  }
-  configurable_product_options_selection {
-    options_available_for_selection {
-      attribute_code
-      option_value_uids
-    }
-  }
-  ...ProductPageDescription
+  ...ConfigurableOptionsBase
   variants {
     attributes {
-      code
+      value_index
       uid
+      code
     }
     product {
       uid
+      sku
+      name
+      small_image {
+        ...ProductImage
+      }
     }
   }
 }

packages/magento-product-configurable/graphql/ConfigurableOptionsBase.graphql

@@ -0,0 +1,34 @@
+fragment ConfigurableOptionsBase on ConfigurableProduct @injectable {
+  __typename
+  uid
+  sku
+  name
+  url_key
+  price_range {
+    minimum_price {
+      final_price {
+        ...Money
+      }
+      regular_price {
+        ...Money
+      }
+    }
+  }
+  configurable_options {
+    attribute_code
+    uid
+    label
+    position
+    use_default
+    values {
+      ...ConfigurableOptionValue
+    }
+  }
+  configurable_product_options_selection {
+    options_available_for_selection {
+      attribute_code
+      option_value_uids
+    }
+  }
+  ...ProductPageDescription
+}

packages/magento-product/Api/ProductListItem.graphql

@@ -11,5 +11,5 @@ fragment ProductListItem on ProductInterface @injectable {
       ...ProductListPrice
     }
   }
-  ...ConfigurableOptions
+  ...ConfigurableOptionsBase
 }