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),
   }
 }
 

lib/bigcommerce/schema.d.ts

@@ -1785,6 +1785,24 @@ export type ProductInfoFragment = { __typename?: 'Product' } & Pick<
     }
   }
 
+export type ProductConnnectionFragment = {
+  __typename?: 'ProductConnection'
+} & {
+  pageInfo: { __typename?: 'PageInfo' } & Pick<
+    PageInfo,
+    'startCursor' | 'endCursor'
+  >
+  edges?: Maybe<
+    Array<
+      Maybe<
+        { __typename?: 'ProductEdge' } & Pick<ProductEdge, 'cursor'> & {
+            node: { __typename?: 'Product' } & ProductInfoFragment
+          }
+      >
+    >
+  >
+}
+
 export type GetAllProductPathsQueryVariables = Exact<{ [key: string]: never }>
 
 export type GetAllProductPathsQuery = { __typename?: 'Query' } & {
@@ -1814,6 +1832,12 @@ export type GetAllProductsQueryVariables = Exact<{
   imgLargeHeight?: Maybe<Scalars['Int']>
   imgXLWidth?: Maybe<Scalars['Int']>
   imgXLHeight?: Maybe<Scalars['Int']>
+  featuredProducts?: Maybe<Scalars['Boolean']>
+  featuredProducts__first?: Maybe<Scalars['Int']>
+  bestSellingProducts?: Maybe<Scalars['Boolean']>
+  bestSellingProducts__first?: Maybe<Scalars['Int']>
+  newestProducts?: Maybe<Scalars['Boolean']>
+  newestProducts__first?: Maybe<Scalars['Int']>
 }>
 
 export type GetAllProductsQuery = { __typename?: 'Query' } & {
@@ -1833,6 +1857,51 @@ export type GetAllProductsQuery = { __typename?: 'Query' } & {
         >
       >
     }
+    featuredProducts: { __typename?: 'ProductConnection' } & {
+      pageInfo: { __typename?: 'PageInfo' } & Pick<
+        PageInfo,
+        'startCursor' | 'endCursor'
+      >
+      edges?: Maybe<
+        Array<
+          Maybe<
+            { __typename?: 'ProductEdge' } & Pick<ProductEdge, 'cursor'> & {
+                node: { __typename?: 'Product' } & ProductInfoFragment
+              }
+          >
+        >
+      >
+    }
+    bestSellingProducts: { __typename?: 'ProductConnection' } & {
+      pageInfo: { __typename?: 'PageInfo' } & Pick<
+        PageInfo,
+        'startCursor' | 'endCursor'
+      >
+      edges?: Maybe<
+        Array<
+          Maybe<
+            { __typename?: 'ProductEdge' } & Pick<ProductEdge, 'cursor'> & {
+                node: { __typename?: 'Product' } & ProductInfoFragment
+              }
+          >
+        >
+      >
+    }
+    newestProducts: { __typename?: 'ProductConnection' } & {
+      pageInfo: { __typename?: 'PageInfo' } & Pick<
+        PageInfo,
+        'startCursor' | 'endCursor'
+      >
+      edges?: Maybe<
+        Array<
+          Maybe<
+            { __typename?: 'ProductEdge' } & Pick<ProductEdge, 'cursor'> & {
+                node: { __typename?: 'Product' } & ProductInfoFragment
+              }
+          >
+        >
+      >
+    }
   }
 }