Fetch products separately

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

@@ -19,27 +19,22 @@ export const getAllProductsQuery = /* GraphQL */ `
     $imgLargeHeight: Int
     $imgXLWidth: Int = 1280
     $imgXLHeight: Int
+    $products: Boolean = false
     $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) {
+      products(first: $first, entityIds: $entityIds) @include(if: $products) {
         ...productConnnection
       }
-      featuredProducts(first: $featuredProducts__first)
+      featuredProducts(first: $first) @include(if: $featuredProducts) {
-        @include(if: $featuredProducts) {
         ...productConnnection
       }
-      bestSellingProducts(first: $bestSellingProducts__first)
+      bestSellingProducts(first: $first) @include(if: $bestSellingProducts) {
-        @include(if: $bestSellingProducts) {
         ...productConnnection
       }
-      newestProducts(first: $newestProducts__first)
+      newestProducts(first: $first) @include(if: $newestProducts) {
-        @include(if: $newestProducts) {
         ...productConnnection
       }
     }
@@ -55,20 +50,17 @@ export type Product = NonNullable<
 export type Products = Product[]
 
 export type GetAllProductsResult<
-  T extends Record<keyof GetAllProductsResult, any[]> = {
+  T extends Record<keyof GetAllProductsResult, any[]> = { products: Products }
-    products: Products
-    featuredProducts: Products
-    bestSellingProducts: Products
-    newestProducts: Products
-  }
 > = T
 
-export type ProductVariables = {
+export type ProductTypes =
-  featured?: boolean | { first?: number }
+  | 'products'
-  bestSelling?: boolean | { first?: number }
+  | 'featuredProducts'
-  newest?: boolean | { first?: number }
+  | 'bestSellingProducts'
-} & Images &
+  | 'newestProducts'
-  Omit<GetAllProductsQueryVariables, keyof ProductImageVariables>
+
+export type ProductVariables = { field?: ProductTypes } & Images &
+  Omit<GetAllProductsQueryVariables, ProductTypes | keyof ProductImageVariables>
 
 async function getAllProducts(opts?: {
   variables?: ProductVariables
@@ -86,7 +78,7 @@ async function getAllProducts<
 
 async function getAllProducts({
   query = getAllProductsQuery,
-  variables: { featured, bestSelling, newest, ...vars } = {},
+  variables: { field = 'products', ...vars } = {},
   config,
 }: {
   query?: string
@@ -94,28 +86,25 @@ async function getAllProducts({
   config?: BigcommerceConfig
 } = {}): Promise<GetAllProductsResult> {
   config = getConfig(config)
+
   const variables: GetAllProductsQueryVariables = {
     ...config.imageVariables,
     ...vars,
   }
 
-  if (bestSelling) {
+  switch (field) {
-    variables.bestSellingProducts = true
+    case 'products':
-    if (typeof bestSelling === 'object' && bestSelling.first) {
+      variables.products = true
-      variables.bestSellingProducts__first = bestSelling.first
+      break
-    }
+    case 'featuredProducts':
-  }
-  if (featured) {
       variables.featuredProducts = true
-    if (typeof featured === 'object' && featured.first) {
+      break
-      variables.featuredProducts__first = featured.first
+    case 'bestSellingProducts':
-    }
+      variables.bestSellingProducts = true
-  }
+      break
-  if (newest) {
+    case 'newestProducts':
       variables.newestProducts = true
-    if (typeof newest === 'object' && newest.first) {
+      break
-      variables.newestProducts__first = newest.first
-    }
   }
 
   // RecursivePartial forces the method to check for every prop in the data, which is
@@ -124,17 +113,10 @@ async function getAllProducts({
     query,
     { variables }
   )
-  const products = data.site?.products?.edges
+  const products = data.site?.[field]?.edges
-
-  type P = RecursiveRequired<typeof products>
 
   return {
-    products: filterEdges(products as P),
+    products: filterEdges(products as RecursiveRequired<typeof products>),
-    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

@@ -1832,76 +1832,24 @@ export type GetAllProductsQueryVariables = Exact<{
   imgLargeHeight?: Maybe<Scalars['Int']>
   imgXLWidth?: Maybe<Scalars['Int']>
   imgXLHeight?: Maybe<Scalars['Int']>
+  products?: Maybe<Scalars['Boolean']>
   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' } & {
   site: { __typename?: 'Site' } & {
-    products: { __typename?: 'ProductConnection' } & {
+    products: { __typename?: 'ProductConnection' } & ProductConnnectionFragment
-      pageInfo: { __typename?: 'PageInfo' } & Pick<
+    featuredProducts: {
-        PageInfo,
+      __typename?: 'ProductConnection'
-        'startCursor' | 'endCursor'
+    } & ProductConnnectionFragment
-      >
+    bestSellingProducts: {
-      edges?: Maybe<
+      __typename?: 'ProductConnection'
-        Array<
+    } & ProductConnnectionFragment
-          Maybe<
+    newestProducts: {
-            { __typename?: 'ProductEdge' } & Pick<ProductEdge, 'cursor'> & {
+      __typename?: 'ProductConnection'
-                node: { __typename?: 'Product' } & ProductInfoFragment
+    } & ProductConnnectionFragment
-              }
-          >
-        >
-      >
-    }
-    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
-              }
-          >
-        >
-      >
-    }
   }
 }
 

pages/index.tsx

@@ -9,6 +9,9 @@ import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages'
 export async function getStaticProps({ preview }: GetStaticPropsContext) {
   const { pages } = await getAllPages()
   const { products } = await getAllProducts()
+  // const { products: featuredProducts } = await getAllProducts({
+  //   variables: { field: 'featuredProducts' },
+  // })
   const { categories, brands } = await getSiteInfo()
 
   return {