Type fixes

components/product/ProductCard/ProductCard.tsx

@@ -1,30 +1,24 @@
 import cn from 'classnames'
 import s from './ProductCard.module.css'
 import { FC, ReactNode, Component } from 'react'
+import type { Product } from '@lib/bigcommerce/api/operations/get-all-products'
 import { Heart } from '@components/icon'
 import Link from 'next/link'
 
 interface Props {
   className?: string
   children?: ReactNode[] | Component[] | any[]
-  node: ProductData
+  product: Product['node']
   variant?: 'slim' | 'simple'
 }
 
-interface ProductData {
-  name: string
-  images: any
-  prices: any
-  path: string
-}
-
-const ProductCard: FC<Props> = ({ className, node: p, variant }) => {
+const ProductCard: FC<Props> = ({ className, product: p, variant }) => {
   if (variant === 'slim') {
     return (
       <div className="relative overflow-hidden box-border">
         <img
           className="object-scale-down h-48"
-          src={p.images.edges[0].node.urlSmall}
+          src={p.images.edges?.[0]?.node.urlSmall}
         />
         <div className="absolute inset-0 flex items-center justify-end mr-8">
           <span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
@@ -41,7 +35,7 @@ const ProductCard: FC<Props> = ({ className, node: p, variant }) => {
         <div className="absolute z-10 inset-0 flex items-center justify-center">
           <img
             className="w-full object-cover"
-            src={p.images.edges[0].node.urlXL}
+            src={p.images.edges?.[0]?.node.urlXL}
           />
         </div>
         <div className={cn(s.squareBg, { [s.gray]: variant === 'simple' })} />
@@ -50,7 +44,7 @@ const ProductCard: FC<Props> = ({ className, node: p, variant }) => {
             <p className={s.productTitle}>
               <span>{p.name}</span>
             </p>
-            <span className={s.productPrice}>${p.prices.price.value}</span>
+            <span className={s.productPrice}>${p.prices?.price.value}</span>
           </div>
           <div className={s.wishlistButton}>
             <Heart />

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

@@ -43,11 +43,13 @@ export const getAllProductsQuery = /* GraphQL */ `
   ${productConnectionFragment}
 `
 
-export type Product = NonNullable<
+export type ProductEdge = NonNullable<
   NonNullable<GetAllProductsQuery['site']['products']['edges']>[0]
 >
 
-export type Products = Product[]
+export type Product = ProductEdge
+
+export type Products = ProductEdge[]
 
 export type GetAllProductsResult<
   T extends Record<keyof GetAllProductsResult, any[]> = { products: Products }

lib/bigcommerce/api/utils/fetch-graphql-api.ts

@@ -6,7 +6,7 @@ export default async function fetchGraphqlApi<Q, V = any>(
   query: string,
   { variables, preview }: CommerceAPIFetchOptions<V> = {}
 ): Promise<Q> {
-  log.warn(query)
+  // log.warn(query)
   const config = getConfig()
   const res = await fetch(config.commerceUrl + (preview ? '/preview' : ''), {
     method: 'POST',

pages/index.tsx

@@ -28,13 +28,13 @@ export default function Home({
   return (
     <div className="mt-3">
       <Grid>
-        {featuredProducts.map((p: any) => (
-          <ProductCard key={p.id} {...p} />
+        {featuredProducts.map(({ node }) => (
+          <ProductCard key={node.path} product={node} />
         ))}
       </Grid>
       <Marquee variant="secondary">
-        {products.slice(0, 3).map((p: any) => (
-          <ProductCard key={p.id} {...p} variant="slim" />
+        {products.slice(0, 3).map(({ node }) => (
+          <ProductCard key={node.path} product={node} variant="slim" />
         ))}
       </Marquee>
       <Hero
@@ -48,13 +48,13 @@ export default function Home({
         ‘Natural’."
       />
       <Grid layout="B">
-        {products.slice(3, 6).map((p: any) => (
-          <ProductCard key={p.id} {...p} />
+        {products.slice(3, 6).map(({ node }) => (
+          <ProductCard key={node.path} product={node} />
         ))}
       </Grid>
       <Marquee>
-        {products.slice(0, 3).map((p: any) => (
-          <ProductCard key={p.id} {...p} variant="slim" />
+        {products.slice(0, 3).map(({ node }) => (
+          <ProductCard key={node.path} product={node} variant="slim" />
         ))}
       </Marquee>
       <div className="py-12 flex flex-row w-full px-12">
@@ -84,8 +84,8 @@ export default function Home({
         </div>
         <div className="flex-1">
           <Grid layout="normal">
-            {products.map((p: any) => (
-              <ProductCard key={p.id} {...p} variant="simple" />
+            {products.map(({ node }) => (
+              <ProductCard key={node.path} product={node} variant="simple" />
             ))}
           </Grid>
         </div>

pages/search.tsx

@@ -141,10 +141,11 @@ export default function Search({
 
           {data ? (
             <Grid layout="normal">
-              {data.products.map((p: any) => (
+              {data.products.map(({ node }) => (
                 <ProductCard
+                  key={node.path}
                   className="animate__animated animate__fadeIn"
-                  {...p}
+                  product={node}
                 />
               ))}
             </Grid>