Merge branch 'main' of https://github.com/vercel/commerce into vercel-main

pagesBAK/product/[slug].tsx

@@ -4,66 +4,77 @@ import type {
   InferGetStaticPropsType,
 } from 'next'
 import { useRouter } from 'next/router'
+import commerce from '@lib/api/commerce'
 import { Layout } from '@components/common'
 import { ProductView } from '@components/product'
 
-// Data
-
-import { getConfig } from '@framework/api'
-import getProduct from '@framework/api/operations/get-product'
-import getAllPages from '@framework/api/operations/get-all-pages'
-import getAllProductPaths from '@framework/api/operations/get-all-product-paths'
-
 export async function getStaticProps({
   params,
   locale,
+  locales,
   preview,
 }: GetStaticPropsContext<{ slug: string }>) {
-  const config = getConfig({ locale })
-
-  const { pages } = await getAllPages({ config, preview })
-  const { product } = await getProduct({
+  const config = { locale, locales }
+  const pagesPromise = commerce.getAllPages({ config, preview })
+  const siteInfoPromise = commerce.getSiteInfo({ config, preview })
+  const productPromise = commerce.getProduct({
     variables: { slug: params!.slug },
     config,
     preview,
   })
 
+  const allProductsPromise = commerce.getAllProducts({
+    variables: { first: 4 },
+    config,
+    preview,
+  })
+  const { pages } = await pagesPromise
+  const { categories } = await siteInfoPromise
+  const { product } = await productPromise
+  const { products: relatedProducts } = await allProductsPromise
+
   if (!product) {
     throw new Error(`Product with slug '${params!.slug}' not found`)
   }
 
   return {
-    props: { pages, product },
+    props: {
+      pages,
+      product,
+      relatedProducts,
+      categories,
+    },
     revalidate: 200,
   }
 }
 
 export async function getStaticPaths({ locales }: GetStaticPathsContext) {
-  const { products } = await getAllProductPaths()
+  const { products } = await commerce.getAllProductPaths()
 
   return {
     paths: locales
       ? locales.reduce<string[]>((arr, locale) => {
           // Add a product path for every locale
-          products.forEach((product) => {
-            arr.push(`/${locale}/product${product.node.path}`)
+          products.forEach((product: any) => {
+            arr.push(`/${locale}/product${product.path}`)
           })
           return arr
         }, [])
-      : products.map((product) => `/product${product.node.path}`),
+      : products.map((product: any) => `/product${product.path}`),
     fallback: 'blocking',
   }
 }
 
 export default function Slug({
   product,
+  relatedProducts,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
   const router = useRouter()
 
   return router.isFallback ? (
-    <h1>Loading...</h1> // TODO (BC) Add Skeleton Views
+    <h1>Loading...</h1>
   ) : (
-    <ProductView product={product} />
+    <ProductView product={product} relatedProducts={relatedProducts} />
   )
 }