MERC-8927 Related products query

packages/bigcommerce/src/api/operations/get-product.ts

@@ -21,6 +21,13 @@ export const getProductQuery = /* GraphQL */ `
           __typename
           ... on Product {
             ...productInfo
+            relatedProducts(first: 4) {
+              edges {
+                node {
+                  ...productInfo
+                }
+              }
+            }
             variants(first: 250) {
               edges {
                 node {

packages/bigcommerce/src/lib/normalize.ts

@@ -18,6 +18,48 @@ function normalizeProductOption(productOption: any) {
   }
 }
 
+function normalizeRelatedProducts(relatedProducts: any) {
+  const {
+    node: { entityId, images, path, prices, productOptions, variants, ...rest },
+  } = relatedProducts
+
+  let normalizedImages = images.edges.map(({ node: { urlOriginal, altText, ...rest }}: any) => ({
+    url: urlOriginal,
+    alt: altText,
+    ...rest,
+  }));
+
+  let normalizedVariants = variants.edges?.map(({ node: { entityId, productOptions, ...rest } }: any) => ({
+    id: entityId,
+    options: productOptions?.edges
+      ? productOptions.edges.map(normalizeProductOption)
+      : [],
+    ...rest,
+  }))
+
+  let options = productOptions.edges
+    ? productOptions?.edges.map(normalizeProductOption)
+    : []
+
+  let slug = path?.replace(/^\/+|\/+$/g, '');
+
+  let normalizedPrice = {
+    value: prices?.price.value,
+    currencyCode: prices?.price.currencyCode,
+  }
+
+  return {
+    id: String(entityId),
+    images: normalizedImages,
+    options,
+    price: normalizedPrice,
+    prices,
+    slug,
+    variants: normalizedVariants,
+    ...rest
+  }
+}
+
 export function normalizeProduct(productNode: any): Product {
   const {
     entityId: id,
@@ -26,6 +68,7 @@ export function normalizeProduct(productNode: any): Product {
     path,
     id: _,
     options: _0,
+    relatedProducts,
   } = productNode
 
   return update(productNode, {
@@ -59,6 +102,11 @@ export function normalizeProduct(productNode: any): Product {
     slug: {
       $set: path?.replace(/^\/+|\/+$/g, ''),
     },
+    relatedProducts: {
+      $set: relatedProducts?.edges
+        ? relatedProducts?.edges.map(normalizeRelatedProducts)
+        : [],
+    },
     price: {
       $set: {
         value: prices?.price.value,

packages/commerce/src/types/product.ts

@@ -43,6 +43,7 @@ export type Product = {
   variants: ProductVariant[]
   price: ProductPrice
   options: ProductOption[]
+  relatedProducts?: Product[]
   vendor?: string
 }
 

packages/commercejs/src/utils/normalize-product.ts

@@ -54,7 +54,7 @@ export function normalizeProduct(
   commercejsProduct: CommercejsProduct,
   commercejsProductVariants: Array<CommercejsVariant> = []
 ): Product {
-  const { id, name, description, permalink, assets, price, variant_groups } =
+  const { id, name, description, permalink, assets, price, related_products, variant_groups } =
     commercejsProduct
   return {
     id,
@@ -71,6 +71,7 @@ export function normalizeProduct(
       value: price.raw,
       currencyCode: 'USD',
     },
+    relatedProducts: related_products,
     variants: normalizeVariants(commercejsProductVariants, variant_groups),
     options: getOptionsFromVariantGroups(variant_groups),
   }

site/pages/product/[slug].tsx

@@ -31,7 +31,7 @@ export async function getStaticProps({
   const { pages } = await pagesPromise
   const { categories } = await siteInfoPromise
   const { product } = await productPromise
-  const { products: relatedProducts } = await allProductsPromise
+  const { products } = await allProductsPromise
 
   if (!product) {
     throw new Error(`Product with slug '${params!.slug}' not found`)
@@ -41,7 +41,7 @@ export async function getStaticProps({
     props: {
       pages,
       product,
-      relatedProducts,
+      products,
       categories,
     },
     revalidate: 200,
@@ -67,9 +67,10 @@ export async function getStaticPaths({ locales }: GetStaticPathsContext) {
 
 export default function Slug({
   product,
-  relatedProducts,
+  products,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
   const router = useRouter()
+  let relatedProducts = product.relatedProducts ? product.relatedProducts : products;
 
   return router.isFallback ? (
     <h1>Loading...</h1>