Added brands

lib/bigcommerce/api/operations/get-all-product-paths.ts

@@ -1,5 +1,6 @@
 import type { GetAllProductPathsQuery } from 'lib/bigcommerce/schema'
 import type { RecursivePartial, RecursiveRequired } from '../utils/types'
+import filterEdges from '../utils/filter-edges'
 import { BigcommerceConfig, getConfig } from '..'
 
 export const getAllProductPathsQuery = /* GraphQL */ `
@@ -16,10 +17,12 @@ export const getAllProductPathsQuery = /* GraphQL */ `
   }
 `
 
-export type ProductPaths = NonNullable<
+export type ProductPath = NonNullable<
-  GetAllProductPathsQuery['site']['products']['edges']
+  NonNullable<GetAllProductPathsQuery['site']['products']['edges']>[0]
 >
 
+export type ProductPaths = ProductPath[]
+
 export type GetAllProductPathsResult<
   T extends { products: any[] } = { products: ProductPaths }
 > = T
@@ -52,7 +55,7 @@ async function getAllProductPaths({
   const products = data.site?.products?.edges
 
   return {
-    products: (products as RecursiveRequired<typeof products>) ?? [],
+    products: filterEdges(products as RecursiveRequired<typeof products>),
   }
 }
 

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

@@ -3,6 +3,7 @@ import type {
   GetAllProductsQueryVariables,
 } from 'lib/bigcommerce/schema'
 import type { RecursivePartial, RecursiveRequired } from '../utils/types'
+import filterEdges from '../utils/filter-edges'
 import { productInfoFragment } from '../fragments/product'
 import { BigcommerceConfig, getConfig, Images, ProductImageVariables } from '..'
 
@@ -37,10 +38,12 @@ export const getAllProductsQuery = /* GraphQL */ `
   ${productInfoFragment}
 `
 
-export type Products = NonNullable<
+export type Product = NonNullable<
-  GetAllProductsQuery['site']['products']['edges']
+  NonNullable<GetAllProductsQuery['site']['products']['edges']>[0]
 >
 
+export type Products = Product[]
+
 export type GetAllProductsResult<
   T extends { products: any[] } = { products: Products }
 > = T
@@ -82,7 +85,7 @@ async function getAllProducts({
   const products = data.site?.products?.edges
 
   return {
-    products: (products as RecursiveRequired<typeof products>) ?? [],
+    products: filterEdges(products as RecursiveRequired<typeof products>),
   }
 }
 

lib/bigcommerce/api/operations/get-site-info.ts

@@ -3,6 +3,7 @@ import type {
   GetSiteInfoQueryVariables,
 } from 'lib/bigcommerce/schema'
 import type { RecursivePartial, RecursiveRequired } from '../utils/types'
+import filterEdges from '../utils/filter-edges'
 import { BigcommerceConfig, getConfig } from '..'
 import { categoryTreeItemFragment } from '../fragments/category-tree'
 
@@ -19,6 +20,28 @@ export const getSiteInfoQuery = /* GraphQL */ `
           }
         }
       }
+      brands {
+        pageInfo {
+          startCursor
+          endCursor
+        }
+        edges {
+          cursor
+          node {
+            entityId
+            name
+            defaultImage {
+              urlOriginal
+              altText
+            }
+            pageTitle
+            metaDesc
+            metaKeywords
+            searchKeywords
+            path
+          }
+        }
+      }
     }
   }
   ${categoryTreeItemFragment}
@@ -28,8 +51,17 @@ export type CategoriesTree = NonNullable<
   GetSiteInfoQuery['site']['categoryTree']
 >
 
+export type BrandEdge = NonNullable<
+  NonNullable<GetSiteInfoQuery['site']['brands']['edges']>[0]
+>
+
+export type Brands = BrandEdge[]
+
 export type GetSiteInfoResult<
-  T extends { categories: any[] } = { categories: CategoriesTree }
+  T extends { categories: any[]; brands: any[] } = {
+    categories: CategoriesTree
+    brands: Brands
+  }
 > = T
 
 async function getSiteInfo(opts?: {
@@ -37,7 +69,10 @@ async function getSiteInfo(opts?: {
   config?: BigcommerceConfig
 }): Promise<GetSiteInfoResult>
 
-async function getSiteInfo<T extends { categories: any[] }, V = any>(opts: {
+async function getSiteInfo<
+  T extends { categories: any[]; brands: any[] },
+  V = any
+>(opts: {
   query: string
   variables?: V
   config?: BigcommerceConfig
@@ -59,9 +94,11 @@ async function getSiteInfo({
     variables,
   })
   const categories = data.site?.categoryTree
+  const brands = data.site?.brands?.edges
 
   return {
     categories: (categories as RecursiveRequired<typeof categories>) ?? [],
+    brands: filterEdges(brands as RecursiveRequired<typeof brands>),
   }
 }
 

lib/bigcommerce/api/utils/filter-edges.ts

@@ -0,0 +1,5 @@
+export default function filterEdges<T>(
+  edges: (T | null | undefined)[] | null | undefined
+) {
+  return edges?.filter((edge): edge is T => !!edge) ?? []
+}

lib/bigcommerce/schema.d.ts

@@ -1830,5 +1830,36 @@ export type GetSiteInfoQuery = { __typename?: 'Query' } & {
         >
       } & CategoryTreeItemFragment
     >
+    brands: { __typename?: 'BrandConnection' } & {
+      pageInfo: { __typename?: 'PageInfo' } & Pick<
+        PageInfo,
+        'startCursor' | 'endCursor'
+      >
+      edges?: Maybe<
+        Array<
+          Maybe<
+            { __typename?: 'BrandEdge' } & Pick<BrandEdge, 'cursor'> & {
+                node: { __typename?: 'Brand' } & Pick<
+                  Brand,
+                  | 'entityId'
+                  | 'name'
+                  | 'pageTitle'
+                  | 'metaDesc'
+                  | 'metaKeywords'
+                  | 'searchKeywords'
+                  | 'path'
+                > & {
+                    defaultImage?: Maybe<
+                      { __typename?: 'Image' } & Pick<
+                        Image,
+                        'urlOriginal' | 'altText'
+                      >
+                    >
+                  }
+              }
+          >
+        >
+      >
+    }
   }
 }

pages/index.tsx

@@ -7,16 +7,17 @@ import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
 
 export async function getStaticProps({ preview }: GetStaticPropsContext) {
   const { products } = await getAllProducts()
-  const { categories } = await getSiteInfo()
+  const { categories, brands } = await getSiteInfo()
 
   return {
-    props: { products, categories },
+    props: { products, categories, brands },
   }
 }
 
 export default function Home({
   products,
   categories,
+  brands,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
   return (
     <>
@@ -53,6 +54,16 @@ export default function Home({
               </li>
             ))}
           </ul>
+          <ul className="uppercase mt-6">
+            <li>
+              <h2 className="font-bold">All Designers</h2>
+            </li>
+            {brands.flatMap(({ node }) => (
+              <li key={node.path} className="mt-2">
+                <a href="#">{node.name}</a>
+              </li>
+            ))}
+          </ul>
         </div>
         <div className="flex-1">
           <Grid

pages/product/[slug].tsx

@@ -42,7 +42,7 @@ export async function getStaticPaths() {
   const { products } = await getAllProductPaths()
 
   return {
-    paths: products.map((product) => `/product${product!.node.path}`),
+    paths: products.map((product) => `/product${product.node.path}`),
     fallback: false,
   }
 }