4
0
forked from crowetic/commerce
2020-10-15 18:55:39 -05:00

47 lines
1.3 KiB
TypeScript

import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
import { useRouter } from 'next/router'
import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages'
import getProduct from '@lib/bigcommerce/api/operations/get-product'
import { Layout } from '@components/core'
import { ProductView } from '@components/product'
import getAllProductPaths from '@lib/bigcommerce/api/operations/get-all-product-paths'
export async function getStaticProps({
params,
}: GetStaticPropsContext<{ slug: string }>) {
const { pages } = await getAllPages()
const { product } = await getProduct({ variables: { slug: params!.slug } })
if (!product) {
throw new Error(`Product with slug '${params!.slug}' not found`)
}
return {
props: { pages, product },
revalidate: 200,
}
}
export async function getStaticPaths() {
const { products } = await getAllProductPaths()
return {
paths: products.map((product) => `/product${product.node.path}`),
fallback: false,
}
}
export default function Slug({
product,
}: InferGetStaticPropsType<typeof getStaticProps>) {
const router = useRouter()
return router.isFallback ? (
<h1>Loading...</h1> // TODO (BC) Add Skeleton Views
) : (
<ProductView product={product} />
)
}
Slug.Layout = Layout