Normalizer

framework/bigcommerce/api/operations/get-all-products.ts

@@ -7,41 +7,7 @@ import filterEdges from '../utils/filter-edges'
 import setProductLocaleMeta from '../utils/set-product-locale-meta'
 import { productConnectionFragment } from '../fragments/product'
 import { BigcommerceConfig, getConfig } from '..'
-
+import { normalizeProduct } from '../../lib/normalize'
-function productsNormalizer(arr: any[]): Product[] {
-  // Normalizes products arr response and flattens node edges
-  return arr.map(
-    ({
-      node: {
-        entityId: id,
-        images,
-        variants,
-        productOptions,
-        prices,
-        path,
-        ...rest
-      },
-    }) => ({
-      id,
-      path,
-      slug: path.slice(1, -1),
-      images: images.edges.map(
-        ({ node: { urlOriginal, altText, ...rest } }: any) => ({
-          url: urlOriginal,
-          alt: altText,
-          ...rest,
-        })
-      ),
-      variants: variants.edges.map(({ node }: any) => node),
-      productOptions: productOptions.edges.map(({ node }: any) => node),
-      price: {
-        value: prices.price.value,
-        currencyCode: prices.price.currencyCode,
-      },
-      ...rest,
-    })
-  )
-}
 
 export const getAllProductsQuery = /* GraphQL */ `
   query getAllProducts(
@@ -161,7 +127,7 @@ async function getAllProducts({
     })
   }
 
-  return { products: productsNormalizer(products) }
+  return { products: products.map(normalizeProduct) }
 }
 
 export default getAllProducts

framework/bigcommerce/api/operations/get-product.ts

@@ -2,6 +2,7 @@ import type { GetProductQuery, GetProductQueryVariables } from '../../schema'
 import setProductLocaleMeta from '../utils/set-product-locale-meta'
 import { productInfoFragment } from '../fragments/product'
 import { BigcommerceConfig, getConfig } from '..'
+import { normalizeProduct } from '@framework/lib/normalize'
 
 export const getProductQuery = /* GraphQL */ `
   query getProduct(
@@ -92,7 +93,7 @@ async function getProduct({
   variables: ProductVariables
   config?: BigcommerceConfig
   preview?: boolean
-}): Promise<GetProductResult> {
+}): Promise<Product | {}> {
   config = getConfig(config)
 
   const locale = vars.locale || config.locale
@@ -109,7 +110,8 @@ async function getProduct({
     if (locale && config.applyLocale) {
       setProductLocaleMeta(product)
     }
-    return { product }
+
+    return { product: normalizeProduct(product as any) }
   }
 
   return {}

framework/bigcommerce/lib/normalize.ts

@@ -0,0 +1,33 @@
+import { ProductNode } from '@framework/api/operations/get-all-products'
+
+export function normalizeProduct(productNode: ProductNode | any): Product {
+  const {
+    entityId: id,
+    images,
+    variants,
+    productOptions,
+    prices,
+    path,
+    ...rest
+  } = productNode
+
+  return {
+    id,
+    path,
+    slug: path.slice(1, -1),
+    images: images.edges?.map(
+      ({ node: { urlOriginal, altText, ...rest } }: any) => ({
+        url: urlOriginal,
+        alt: altText,
+        ...rest,
+      })
+    ),
+    variants: variants?.edges?.map(({ node }: any) => node),
+    productOptions: productOptions?.edges?.map(({ node }: any) => node),
+    price: {
+      value: prices?.price.value,
+      currencyCode: prices?.price.currencyCode,
+    },
+    ...rest,
+  }
+}

framework/types.d.ts

@@ -1,11 +1,15 @@
-interface Product {
+interface Entity {
   id: string | number
+  [prop: string]: any
+}
+
+interface Product extends Entity {
   name: string
   description: string
   slug: string
   path?: string
-  images: ProductImage[]
+  images: ProductImage[] | any[] | undefined
-  variants: ProductVariant[]
+  variants: ProductVariant[] | any[] | undefined
   price: ProductPrice
 }
 interface ProductImage {
@@ -19,25 +23,23 @@ interface ProductVariant {
 
 interface ProductPrice {
   value: number
-  currencyCode: 'USD' | 'ARS'
+  currencyCode: 'USD' | 'ARS' | string | undefined
   retailValue?: number
   saleValue?: number
 }
 
-interface Cart {
+interface Cart extends Entity {
   id: string
   products: Pick<Product, 'id' | 'name' | 'prices'>[]
 }
 
-interface Wishlist {
+interface Wishlist extends Entity {
-  id: string
   products: Pick<Product, 'id' | 'name' | 'prices'>[]
 }
 
 interface Order {}
 
-interface Customer {
+interface Customer extends Entity {
-  id: string | number | undefined
   [prop: string]: any
 }
 
@@ -45,12 +47,12 @@ type UseCustomerResponse = {
   customer: Customer
 } | null
 
-interface Category {
+interface Category extends Entity {
   id: string
   name: string
 }
 
-interface Brand {
+interface Brand extends Entity {
   id: string
   name: string
 }

pages/product/[slug].tsx

@@ -7,8 +7,6 @@ import { useRouter } from 'next/router'
 import { Layout } from '@components/common'
 import { ProductView } from '@components/product'
 
-// Data
-
 import { getConfig } from '@framework/api'
 import getProduct from '@framework/api/operations/get-product'
 import getAllPages from '@framework/api/operations/get-all-pages'