feat: getStaticProps in product detail

:%s
This commit is contained in:
lytrankieio123
2021-10-07 10:56:22 +07:00
parent a5b10aa856
commit 5c71671bf2
3 changed files with 29 additions and 21 deletions

View File

@@ -1,12 +1,14 @@
import { Product } from '@framework/schema'
import commerce from '@lib/api/commerce'
import { GetStaticPathsContext, GetStaticPropsContext, InferGetStaticPropsType } from 'next'
import { Layout, RecipeDetail, RecommendedRecipes, RelevantBlogPosts } from 'src/components/common'
import { ProductInfoDetail, ReleventProducts, ViewedProducts } from 'src/components/modules/product-detail'
import { REVALIDATE_TIME } from 'src/utils/constanst.utils'
import { BLOGS_DATA_TEST, INGREDIENT_DATA_TEST, RECIPE_DATA_TEST } from 'src/utils/demo-data'
import { getAllPromies } from 'src/utils/funtion.utils'
import { PromiseWithKey } from 'src/utils/types.utils'
export default function Slug({ product } : InferGetStaticPropsType<typeof getStaticProps>) {
export default function Slug({ product }: InferGetStaticPropsType<typeof getStaticProps>) {
console.log("product: ", product)
return <>
@@ -26,26 +28,31 @@ export async function getStaticProps({
preview,
}: GetStaticPropsContext<{ slug: string }>) {
const config = { locale, locales }
let promisesWithKey = [] as PromiseWithKey[]
let props = {} as any
const productPromise = commerce.getProduct({
variables: { slug: params!.slug },
config,
preview,
})
promisesWithKey.push({ key: 'product', promise: productPromise, keyResult: 'product' })
console.log('slug: ', params!.slug)
try {
const promises = getAllPromies(promisesWithKey)
const rs = await Promise.all(promises)
const { product } = await productPromise
if (!product) {
throw new Error(`Product with slug '${params!.slug}' not found`)
}
promisesWithKey.map((item, index) => {
props[item.key] = item.keyResult ? rs[index][item.keyResult] : rs[index]
return null
})
return {
props: {
product,
},
revalidate: 60,
props,
revalidate: REVALIDATE_TIME,
}
} catch (err) {
}
}

View File

@@ -5,7 +5,7 @@ import { GetStaticPropsContext } from 'next';
import { Layout } from 'src/components/common';
import { ViewedProducts } from 'src/components/modules/product-detail';
import ProductListFilter from 'src/components/modules/product-list/ProductListFilter/ProductListFilter';
import { CODE_FACET_BRAND, CODE_FACET_FEATURED, DEFAULT_PAGE_SIZE } from 'src/utils/constanst.utils';
import { CODE_FACET_BRAND, CODE_FACET_FEATURED, DEFAULT_PAGE_SIZE, REVALIDATE_TIME } from 'src/utils/constanst.utils';
import { getAllPromies } from 'src/utils/funtion.utils';
import { PromiseWithKey, SortOrder } from 'src/utils/types.utils';
import ProductListBanner from '../src/components/modules/product-list/ProductListBanner/ProductListBanner';
@@ -87,7 +87,7 @@ export async function getStaticProps({
return {
props,
revalidate: 60,
revalidate: REVALIDATE_TIME,
}
} catch (err) {

View File

@@ -1,5 +1,6 @@
import DefaultImg from '../../public/assets/images/default_img.jpg'
export const REVALIDATE_TIME = 60
export const BLUR_DATA_IMG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mN8fBIAApUBruKYvzsAAAAASUVORK5CYII='
export const DEFAULT_IMG = DefaultImg