diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index 30ffaffb1..cae070fbd 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -1,14 +1,14 @@ 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 type { ProductNode } 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[] - product: Product['node'] + product: ProductNode variant?: 'slim' | 'simple' } diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx index 71d874a25..a8acdbd39 100644 --- a/components/product/ProductView/ProductView.tsx +++ b/components/product/ProductView/ProductView.tsx @@ -1,18 +1,18 @@ import { NextSeo } from 'next-seo' import { FC, useState } from 'react' -import s from './ProductView.module.css' +import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product' import { Colors } from '@components/ui/types' import { useUI } from '@components/ui/context' import { Button, Container } from '@components/ui' import { Swatch, ProductSlider } from '@components/product' import useAddItem from '@lib/bigcommerce/cart/use-add-item' -import type { Product } from '@lib/bigcommerce/api/operations/get-product' import { getProductOptions } from '../helpers' +import s from './ProductView.module.css' interface Props { className?: string children?: any - product: Product + product: ProductNode } const ProductView: FC = ({ product, className }) => { diff --git a/components/product/helpers.ts b/components/product/helpers.ts index 8d40a74dd..f6ec90f22 100644 --- a/components/product/helpers.ts +++ b/components/product/helpers.ts @@ -1,6 +1,6 @@ -import type { Product } from '@lib/bigcommerce/api/operations/get-product' +import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product' -export function getProductOptions(product: Product) { +export function getProductOptions(product: ProductNode) { // console.log(product) const options = product.productOptions.edges?.map(({ node }: any) => ({ displayName: node.displayName.toLowerCase(), diff --git a/lib/bigcommerce/api/catalog/handlers/get-products.ts b/lib/bigcommerce/api/catalog/handlers/get-products.ts index 0f845d771..c8dfd8ce3 100644 --- a/lib/bigcommerce/api/catalog/handlers/get-products.ts +++ b/lib/bigcommerce/api/catalog/handlers/get-products.ts @@ -1,7 +1,4 @@ -import getAllProducts, { - Products, - Product, -} from '../../operations/get-all-products' +import getAllProducts, { ProductEdge } from '../../operations/get-all-products' import type { ProductsHandlers } from '../products' const SORT: { [key: string]: string | undefined } = { @@ -54,14 +51,13 @@ const getProducts: ProductsHandlers['getProducts'] = async ({ variables: { first: LIMIT, entityIds }, }) // Put the products in an object that we can use to get them by id - const productsById = graphqlData.products.reduce<{ [k: number]: Product }>( - (prods, p) => { - prods[p.node.entityId] = p - return prods - }, - {} - ) - const products: Products = found ? [] : graphqlData.products + const productsById = graphqlData.products.reduce<{ + [k: number]: ProductEdge + }>((prods, p) => { + prods[p.node.entityId] = p + return prods + }, {}) + const products: ProductEdge[] = found ? [] : graphqlData.products // Populate the products array with the graphql products, in the order // assigned by the list of entity ids diff --git a/lib/bigcommerce/api/catalog/products.ts b/lib/bigcommerce/api/catalog/products.ts index 0af21149e..95d780474 100644 --- a/lib/bigcommerce/api/catalog/products.ts +++ b/lib/bigcommerce/api/catalog/products.ts @@ -4,11 +4,11 @@ import createApiHandler, { BigcommerceHandler, } from '../utils/create-api-handler' import { BigcommerceApiError } from '../utils/errors' -import type { Products } from '../operations/get-all-products' +import type { ProductEdge } from '../operations/get-all-products' import getProducts from './handlers/get-products' export type SearchProductsData = { - products: Products + products: ProductEdge[] found: boolean } diff --git a/lib/bigcommerce/api/operations/get-all-products.ts b/lib/bigcommerce/api/operations/get-all-products.ts index 39f7ba147..c4408a4b6 100644 --- a/lib/bigcommerce/api/operations/get-all-products.ts +++ b/lib/bigcommerce/api/operations/get-all-products.ts @@ -1,7 +1,7 @@ import type { GetAllProductsQuery, GetAllProductsQueryVariables, -} from 'lib/bigcommerce/schema' +} from '@lib/bigcommerce/schema' import type { RecursivePartial, RecursiveRequired } from '../utils/types' import filterEdges from '../utils/filter-edges' import { productConnectionFragment } from '../fragments/product' @@ -47,12 +47,12 @@ export type ProductEdge = NonNullable< NonNullable[0] > -export type Product = ProductEdge - -export type Products = ProductEdge[] +export type ProductNode = ProductEdge['node'] export type GetAllProductsResult< - T extends Record = { products: Products } + T extends Record = { + products: ProductEdge[] + } > = T const FIELDS = [ diff --git a/lib/bigcommerce/api/operations/get-product.ts b/lib/bigcommerce/api/operations/get-product.ts index 4f052bbee..a4f91afdb 100644 --- a/lib/bigcommerce/api/operations/get-product.ts +++ b/lib/bigcommerce/api/operations/get-product.ts @@ -33,13 +33,13 @@ export const getProductQuery = /* GraphQL */ ` ${productInfoFragment} ` -export type Product = Extract< +export type ProductNode = Extract< GetProductQuery['site']['route']['node'], { __typename: 'Product' } > export type GetProductResult< - T extends { product?: any } = { product?: Product } + T extends { product?: any } = { product?: ProductNode } > = T export type ProductVariables = Images &