Use the query

lib/bigcommerce/api/index.ts

@@ -69,12 +69,3 @@ export default class BigcommerceAPI implements CommerceAPI {
     };
   }
 }
-
-let h = new BigcommerceAPI({ apiToken: '', commerceUrl: '' });
-
-async function yay() {
-  const x = await h.getAllProducts<{ custom: 'val' }>({ query: 'yes' });
-  const y = await h.getAllProducts();
-
-  console.log(x.products);
-}

lib/commerce-api.ts

@@ -0,0 +1,9 @@
+import BigcommerceAPI from './bigcommerce/api';
+
+const API_URL = process.env.NEXT_EXAMPLE_BIGCOMMERCE_STOREFRONT_API_URL!;
+const API_TOKEN = process.env.NEXT_EXAMPLE_BIGCOMMERCE_STOREFRONT_API_TOKEN!;
+
+export const commerce = new BigcommerceAPI({
+  commerceUrl: API_URL,
+  apiToken: API_TOKEN,
+});

lib/commerce/api/index.ts

@@ -14,7 +14,7 @@ export interface CommerceAPI {
 
   fetch<T>(query: string, queryData?: CommerceAPIFetchOptions): Promise<T>;
 
-  getAllProducts(options?: { query?: string }): Promise<any>;
+  getAllProducts(options?: { query: string }): Promise<any>;
 }
 
 // export default class CommerceAPI {

pages/index.tsx

@@ -1,6 +1,20 @@
-import { Layout } from "@components/core";
+import { GetStaticPropsContext, InferGetStaticPropsType } from 'next';
+import { commerce } from 'lib/commerce-api';
+import { Layout } from '@components/core';
+
+export async function getStaticProps({ preview }: GetStaticPropsContext) {
+  const products = await commerce.getAllProducts();
+
+  return {
+    props: { products },
+  };
+}
+
+export default function Home({
+  products,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  console.log('PRODUCTS', products);
 
-export default function Home() {
   return (
     <Layout>
       <div className="h-full grid grid-cols-1 h-full lg:grid-cols-3 lg:grid-rows-2">