diff --git a/lib/bigcommerce/api/fragments/category-tree.ts b/lib/bigcommerce/api/fragments/category-tree.ts new file mode 100644 index 000000000..e26f17195 --- /dev/null +++ b/lib/bigcommerce/api/fragments/category-tree.ts @@ -0,0 +1,9 @@ +export const categoryTreeItemFragment = /* GraphQL */ ` + fragment categoryTreeItem on CategoryTreeItem { + entityId + name + path + description + productCount + } +` diff --git a/lib/bigcommerce/api/operations/get-site-info.ts b/lib/bigcommerce/api/operations/get-site-info.ts new file mode 100644 index 000000000..85929e9a0 --- /dev/null +++ b/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 + +async function getSiteInfo(opts: { + query: string + variables?: V + config?: BigcommerceConfig +}): Promise> + +async function getSiteInfo({ + query = getSiteInfoQuery, + variables, + config, +}: { + query?: string + variables?: GetSiteInfoQueryVariables + config?: BigcommerceConfig +} = {}): Promise { + 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>(query, { + variables, + }) + const categories = data.site?.categoryTree + + return { + categories: (categories as RecursiveRequired) ?? [], + } +} + +export default getSiteInfo diff --git a/lib/bigcommerce/schema.d.ts b/lib/bigcommerce/schema.d.ts index 42ade6232..5741f32cd 100644 --- a/lib/bigcommerce/schema.d.ts +++ b/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 + > + } +} diff --git a/pages/index.tsx b/pages/index.tsx index 2866e7e4e..4eb0b0706 100644 --- a/pages/index.tsx +++ b/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) { return ( <> @@ -39,8 +42,17 @@ export default function Home({ wrapper={(p: any) => } />
-
- ALL CATEGORIES ACCESSORIES BAGS CLOTHING SHOES ALL DESIGNERS 032c 1017 +
+
    +
  • +

    All Categories

    +
  • + {categories.map((cat) => ( +
  • + {cat.name} +
  • + ))} +