Dynamic categories

lib/bigcommerce/api/fragments/category-tree.ts

@@ -0,0 +1,9 @@
+export const categoryTreeItemFragment = /* GraphQL */ `
+  fragment categoryTreeItem on CategoryTreeItem {
+    entityId
+    name
+    path
+    description
+    productCount
+  }
+`

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

@@ -0,0 +1,68 @@
+import type {
+  GetSiteInfoQuery,
+  GetSiteInfoQueryVariables,
+} from 'lib/bigcommerce/schema'
+import type { RecursivePartial, RecursiveRequired } from '../utils/types'
+import { BigcommerceConfig, getConfig } from '..'
+import { categoryTreeItemFragment } from '../fragments/category-tree'
+
+// Get 3 levels of categories
+export const getSiteInfoQuery = /* GraphQL */ `
+  query getSiteInfo {
+    site {
+      categoryTree {
+        ...categoryTreeItem
+        children {
+          ...categoryTreeItem
+          children {
+            ...categoryTreeItem
+          }
+        }
+      }
+    }
+  }
+  ${categoryTreeItemFragment}
+`
+
+export type CategoriesTree = NonNullable<
+  GetSiteInfoQuery['site']['categoryTree']
+>
+
+export type GetSiteInfoResult<
+  T extends { categories: any[] } = { categories: CategoriesTree }
+> = T
+
+async function getSiteInfo(opts?: {
+  variables?: GetSiteInfoQueryVariables
+  config?: BigcommerceConfig
+}): Promise<GetSiteInfoResult>
+
+async function getSiteInfo<T extends { categories: any[] }, V = any>(opts: {
+  query: string
+  variables?: V
+  config?: BigcommerceConfig
+}): Promise<GetSiteInfoResult<T>>
+
+async function getSiteInfo({
+  query = getSiteInfoQuery,
+  variables,
+  config,
+}: {
+  query?: string
+  variables?: GetSiteInfoQueryVariables
+  config?: BigcommerceConfig
+} = {}): Promise<GetSiteInfoResult> {
+  config = getConfig(config)
+  // 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<GetSiteInfoQuery>>(query, {
+    variables,
+  })
+  const categories = data.site?.categoryTree
+
+  return {
+    categories: (categories as RecursiveRequired<typeof categories>) ?? [],
+  }
+}
+
+export default getSiteInfo

lib/bigcommerce/schema.d.ts

@@ -1653,6 +1653,13 @@ export enum CurrencyCode {
   Zwr = 'ZWR',
 }
 
+export type CategoryTreeItemFragment = {
+  __typename?: 'CategoryTreeItem'
+} & Pick<
+  CategoryTreeItem,
+  'entityId' | 'name' | 'path' | 'description' | 'productCount'
+>
+
 export type ResponsiveImageFragment = { __typename?: 'Image' } & Pick<
   Image,
   'urlOriginal' | 'altText' | 'isDefault'
@@ -1807,3 +1814,21 @@ export type GetProductQuery = { __typename?: 'Query' } & {
     }
   }
 }
+
+export type GetSiteInfoQueryVariables = Exact<{ [key: string]: never }>
+
+export type GetSiteInfoQuery = { __typename?: 'Query' } & {
+  site: { __typename?: 'Site' } & {
+    categoryTree: Array<
+      { __typename?: 'CategoryTreeItem' } & {
+        children: Array<
+          { __typename?: 'CategoryTreeItem' } & {
+            children: Array<
+              { __typename?: 'CategoryTreeItem' } & CategoryTreeItemFragment
+            >
+          } & CategoryTreeItemFragment
+        >
+      } & CategoryTreeItemFragment
+    >
+  }
+}

pages/index.tsx

@@ -3,17 +3,20 @@ import getAllProducts from '@lib/bigcommerce/api/operations/get-all-products'
 import { Layout } from '@components/core'
 import { Grid, Marquee, Hero } from '@components/ui'
 import { ProductCard } from '@components/product'
+import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
 
 export async function getStaticProps({ preview }: GetStaticPropsContext) {
   const { products } = await getAllProducts()
+  const { categories } = await getSiteInfo()
 
   return {
-    props: { products },
+    props: { products, categories },
   }
 }
 
 export default function Home({
   products,
+  categories,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
   return (
     <>
@@ -39,8 +42,17 @@ export default function Home({
         wrapper={(p: any) => <ProductCard {...p} variant="slim" />}
       />
       <div className="py-12 flex flex-row w-full">
-        <div className="flex-0 pr-3 w-48 break-words">
-          ALL CATEGORIES ACCESSORIES BAGS CLOTHING SHOES ALL DESIGNERS 032c 1017
+        <div className="pr-3 w-48">
+          <ul className="uppercase">
+            <li>
+              <h2 className="font-bold">All Categories</h2>
+            </li>
+            {categories.map((cat) => (
+              <li key={cat.path} className="mt-2">
+                <a href="#">{cat.name}</a>
+              </li>
+            ))}
+          </ul>
         </div>
         <div className="flex-1">
           <Grid