Added more info about the products

lib/bigcommerce/api/fragments/product.ts

@@ -9,12 +9,15 @@ export const responsiveImageFragment = /* GraphQL */ `
     isDefault
   }
 `
-export const multipleChoiceFragment = /* GraphQL */ `
+
+export const swatchOptionFragment = /* GraphQL */ `
   fragment swatchOption on SwatchOptionValue {
     isDefault
     hexColors
   }
+`
 
+export const multipleChoiceOptionFragment = /* GraphQL */ `
   fragment multipleChoiceOption on MultipleChoiceOption {
     entityId
     values {
@@ -26,6 +29,8 @@ export const multipleChoiceFragment = /* GraphQL */ `
       }
     }
   }
+
+  ${swatchOptionFragment}
 `
 
 export const productInfoFragment = /* GraphQL */ `
@@ -76,5 +81,22 @@ export const productInfoFragment = /* GraphQL */ `
   }
 
   ${responsiveImageFragment}
-  ${multipleChoiceFragment}
+  ${multipleChoiceOptionFragment}
+`
+
+export const productConnectionFragment = /* GraphQL */ `
+  fragment productConnnection on ProductConnection {
+    pageInfo {
+      startCursor
+      endCursor
+    }
+    edges {
+      cursor
+      node {
+        ...productInfo
+      }
+    }
+  }
+
+  ${productInfoFragment}
 `

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

@@ -4,7 +4,7 @@ import type {
 } from 'lib/bigcommerce/schema'
 import type { RecursivePartial, RecursiveRequired } from '../utils/types'
 import filterEdges from '../utils/filter-edges'
-import { productInfoFragment } from '../fragments/product'
+import { productConnectionFragment } from '../fragments/product'
 import { BigcommerceConfig, getConfig, Images, ProductImageVariables } from '..'
 
 export const getAllProductsQuery = /* GraphQL */ `
@@ -19,24 +19,33 @@ export const getAllProductsQuery = /* GraphQL */ `
     $imgLargeHeight: Int
     $imgXLWidth: Int = 1280
     $imgXLHeight: Int
+    $featuredProducts: Boolean = false
+    $featuredProducts__first: Int = 10
+    $bestSellingProducts: Boolean = false
+    $bestSellingProducts__first: Int = 10
+    $newestProducts: Boolean = false
+    $newestProducts__first: Int = 10
   ) {
     site {
       products(first: $first, entityIds: $entityIds) {
-        pageInfo {
-          startCursor
-          endCursor
-        }
-        edges {
-          cursor
-          node {
-            ...productInfo
-          }
-        }
+        ...productConnnection
+      }
+      featuredProducts(first: $featuredProducts__first)
+        @include(if: $featuredProducts) {
+        ...productConnnection
+      }
+      bestSellingProducts(first: $bestSellingProducts__first)
+        @include(if: $bestSellingProducts) {
+        ...productConnnection
+      }
+      newestProducts(first: $newestProducts__first)
+        @include(if: $newestProducts) {
+        ...productConnnection
       }
     }
   }
 
-  ${productInfoFragment}
+  ${productConnectionFragment}
 `
 
 export type Product = NonNullable<
@@ -46,10 +55,19 @@ export type Product = NonNullable<
 export type Products = Product[]
 
 export type GetAllProductsResult<
-  T extends { products: any[] } = { products: Products }
+  T extends Record<keyof GetAllProductsResult, any[]> = {
+    products: Products
+    featuredProducts: Products
+    bestSellingProducts: Products
+    newestProducts: Products
+  }
 > = T
 
-export type ProductVariables = Images &
+export type ProductVariables = {
+  featured?: boolean | { first?: number }
+  bestSelling?: boolean | { first?: number }
+  newest?: boolean | { first?: number }
+} & Images &
   Omit<GetAllProductsQueryVariables, keyof ProductImageVariables>
 
 async function getAllProducts(opts?: {
@@ -57,7 +75,10 @@ async function getAllProducts(opts?: {
   config?: BigcommerceConfig
 }): Promise<GetAllProductsResult>
 
-async function getAllProducts<T extends { products: any[] }, V = any>(opts: {
+async function getAllProducts<
+  T extends Record<keyof GetAllProductsResult, any[]>,
+  V = any
+>(opts: {
   query: string
   variables?: V
   config?: BigcommerceConfig
@@ -65,7 +86,7 @@ async function getAllProducts<T extends { products: any[] }, V = any>(opts: {
 
 async function getAllProducts({
   query = getAllProductsQuery,
-  variables: vars,
+  variables: { featured, bestSelling, newest, ...vars } = {},
   config,
 }: {
   query?: string
@@ -77,6 +98,26 @@ async function getAllProducts({
     ...config.imageVariables,
     ...vars,
   }
+
+  if (bestSelling) {
+    variables.bestSellingProducts = true
+    if (typeof bestSelling === 'object' && bestSelling.first) {
+      variables.bestSellingProducts__first = bestSelling.first
+    }
+  }
+  if (featured) {
+    variables.featuredProducts = true
+    if (typeof featured === 'object' && featured.first) {
+      variables.featuredProducts__first = featured.first
+    }
+  }
+  if (newest) {
+    variables.newestProducts = true
+    if (typeof newest === 'object' && newest.first) {
+      variables.newestProducts__first = newest.first
+    }
+  }
+
   // RecursivePartial forces the method to check for every prop in the data, which is
   // required in case there's a custom `query`
   const data = await config.fetch<RecursivePartial<GetAllProductsQuery>>(
@@ -85,8 +126,15 @@ async function getAllProducts({
   )
   const products = data.site?.products?.edges
 
+  type P = RecursiveRequired<typeof products>
+
   return {
-    products: filterEdges(products as RecursiveRequired<typeof products>),
+    products: filterEdges(products as P),
+    featuredProducts: filterEdges(data.site?.featuredProducts?.edges as P),
+    bestSellingProducts: filterEdges(
+      data.site?.bestSellingProducts?.edges as P
+    ),
+    newestProducts: filterEdges(data.site?.newestProducts?.edges as P),
   }
 }