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: [] },
@@ -29,40 +26,11 @@ export function ProductListItemConfigurable(props: ProdustListItemConfigurablePr
     topRight,
     ...configurableProduct
   } = props
-  const { params } = useProductListParamsContext()
-
-  const options: [string, string[]][] =
-    configurable_options
-      ?.filter(
-        (option) =>
-          option?.attribute_code &&
-          params.filters[option.attribute_code] &&
-          isFilterTypeEqual(params.filters[option.attribute_code]),
-      )
-      .map((option) => {
-        const filter = params.filters[option?.attribute_code ?? '']
-        return [option?.attribute_code ?? '', (filter?.in as string[]) ?? []]
-      }) ?? []
-
-  const selected = {}
-
-  options.forEach(([attr, values]) => {
-    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,
-  )
 
   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
 }