mirror of
https://github.com/vercel/commerce.git
synced 2025-07-24 10:41:23 +00:00
🐛 bug: fix bug handle 404 for blog detail
:%s
This commit is contained in:
@@ -34,7 +34,9 @@ export default function getBlogDetailOperation({
|
|||||||
const { data } = await config.fetch<GetBlogQuery>(query, {
|
const { data } = await config.fetch<GetBlogQuery>(query, {
|
||||||
variables,
|
variables,
|
||||||
})
|
})
|
||||||
return {
|
if(data.blog){
|
||||||
|
|
||||||
|
return {
|
||||||
blogDetail: {
|
blogDetail: {
|
||||||
id:data?.blog?.id,
|
id:data?.blog?.id,
|
||||||
title: data?.blog?.translations[0].title,
|
title: data?.blog?.translations[0].title,
|
||||||
@@ -48,7 +50,12 @@ export default function getBlogDetailOperation({
|
|||||||
createdAt: data?.blog?.createdAt,
|
createdAt: data?.blog?.createdAt,
|
||||||
relevantProducts: data?.blog?.relevantProducts.map(val=>val.id)
|
relevantProducts: data?.blog?.relevantProducts.map(val=>val.id)
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}else{
|
||||||
|
return {blogDetail:null}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return getBlogDetail
|
return getBlogDetail
|
||||||
|
@@ -34,6 +34,8 @@ export default function getRelevantBlogsOperation({
|
|||||||
const { data } = await config.fetch<GetRelevantBlogsQuery>(query, {
|
const { data } = await config.fetch<GetRelevantBlogsQuery>(query, {
|
||||||
variables,
|
variables,
|
||||||
})
|
})
|
||||||
|
if(data){
|
||||||
|
|
||||||
return {
|
return {
|
||||||
relevantBlogs: data?.relevantBlogs?.items?.map((val:BlogList)=>({
|
relevantBlogs: data?.relevantBlogs?.items?.map((val:BlogList)=>({
|
||||||
id: val.id,
|
id: val.id,
|
||||||
@@ -48,6 +50,9 @@ export default function getRelevantBlogsOperation({
|
|||||||
createdAt: val.createdAt
|
createdAt: val.createdAt
|
||||||
})),
|
})),
|
||||||
}
|
}
|
||||||
|
}else{
|
||||||
|
return {relevantBlogs:[]}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return getRelevantBlogs
|
return getRelevantBlogs
|
||||||
|
@@ -1,22 +1,17 @@
|
|||||||
|
import commerce from '@lib/api/commerce';
|
||||||
|
import { GetStaticPathsContext, GetStaticPropsContext } from 'next';
|
||||||
import { Layout, RelevantBlogPosts } from 'src/components/common';
|
import { Layout, RelevantBlogPosts } from 'src/components/common';
|
||||||
|
import { BlogCardProps } from 'src/components/common/CardBlog/CardBlog';
|
||||||
import BlogContent from 'src/components/modules/blog-detail/BlogContent/BlogContent';
|
import BlogContent from 'src/components/modules/blog-detail/BlogContent/BlogContent';
|
||||||
import BlogDetailImg from 'src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg';
|
import BlogDetailImg from 'src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg';
|
||||||
import { BLOGS_DATA_TEST } from 'src/utils/demo-data'
|
import { REVALIDATE_TIME } from 'src/utils/constanst.utils';
|
||||||
import { GetStaticPropsContext,GetStaticPathsContext } from 'next';
|
import { formatDate, getAllPromies } from 'src/utils/funtion.utils';
|
||||||
import { PromiseWithKey } from 'src/utils/types.utils';
|
import { PromiseWithKey } from 'src/utils/types.utils';
|
||||||
import { getAllPromies } from 'src/utils/funtion.utils';
|
|
||||||
import commerce from '@lib/api/commerce';
|
|
||||||
import { BlogCardProps } from 'src/components/common/CardBlog/CardBlog';
|
|
||||||
import { REVALIDATE_TIME } from 'src/utils/constanst.utils'
|
|
||||||
interface Props {
|
interface Props {
|
||||||
blog:{blogDetail?: BlogCardProps},
|
blog:{blogDetail?: BlogCardProps},
|
||||||
relevant:{relevantBlogs?:BlogCardProps[]}
|
relevant:{relevantBlogs?:BlogCardProps[]}
|
||||||
}
|
}
|
||||||
export default function BlogDetailPage({blog,relevant}:Props) {
|
export default function BlogDetailPage({blog,relevant}:Props) {
|
||||||
|
|
||||||
let date = new Date(blog?.blogDetail?.createdAt ?? '' );
|
|
||||||
let fullDate = date.toLocaleString('en-us', { month: 'long' }) + " " + date.getDate()+","+date.getFullYear();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<BlogDetailImg imgSrc={blog?.blogDetail?.imageSrc ?? ''} />
|
<BlogDetailImg imgSrc={blog?.blogDetail?.imageSrc ?? ''} />
|
||||||
@@ -25,9 +20,9 @@ export default function BlogDetailPage({blog,relevant}:Props) {
|
|||||||
content={blog?.blogDetail?.description}
|
content={blog?.blogDetail?.description}
|
||||||
imgAuthor={blog?.blogDetail?.authorAvatarAsset}
|
imgAuthor={blog?.blogDetail?.authorAvatarAsset}
|
||||||
authorName={blog?.blogDetail?.authorName}
|
authorName={blog?.blogDetail?.authorName}
|
||||||
date={fullDate}
|
date={formatDate(blog?.blogDetail?.createdAt ?? '')}
|
||||||
/>
|
/>
|
||||||
{relevant.relevantBlogs?.length> 0 && <RelevantBlogPosts data={relevant.relevantBlogs} title="You will like also" bgcolor="cream"/>}
|
{(relevant?.relevantBlogs && relevant?.relevantBlogs?.length > 0) && <RelevantBlogPosts data={relevant.relevantBlogs} title="You will like also" bgcolor="cream"/>}
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@@ -49,27 +44,26 @@ export async function getStaticProps({
|
|||||||
config,
|
config,
|
||||||
preview,
|
preview,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
if (blogDetailPromise.blogDetail === null) {
|
||||||
|
return { notFound: true };
|
||||||
|
}
|
||||||
props.blog = blogDetailPromise;
|
props.blog = blogDetailPromise;
|
||||||
|
|
||||||
if (!blogDetailPromise) {
|
|
||||||
throw new Error(`Blog with slug '${params!.slug}' not found`)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Relevant Blogs
|
// Relevant Blogs
|
||||||
const relevantProductId = blogDetailPromise.blogDetail.relevantProducts?.[0];
|
const relevantProductId = blogDetailPromise?.blogDetail?.relevantProducts?.[0];
|
||||||
if (relevantProductId && blogDetailPromise.blogDetail.relevantProducts.length > 0) {
|
if (relevantProductId && blogDetailPromise?.blogDetail?.relevantProducts?.length > 0) {
|
||||||
|
|
||||||
const relevantBlogs = commerce.getRelevantBlogs({
|
const relevantBlogs = commerce.getRelevantBlogs({
|
||||||
variables: { productId: relevantProductId },
|
variables: { productId: Number(relevantProductId) },
|
||||||
config,
|
config,
|
||||||
preview,
|
preview,
|
||||||
})
|
})
|
||||||
promisesWithKey.push({ key: 'relevant', promise: relevantBlogs})
|
promisesWithKey.push({ key: 'relevant', promise: relevantBlogs})
|
||||||
|
|
||||||
}else {
|
}else {
|
||||||
props.relevantBlogs = [];
|
props.relevantBlogs = [];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const promises = getAllPromies(promisesWithKey)
|
const promises = getAllPromies(promisesWithKey)
|
||||||
@@ -80,7 +74,6 @@ export async function getStaticProps({
|
|||||||
return null
|
return null
|
||||||
})
|
})
|
||||||
|
|
||||||
console.log(props.relevantBlogs);
|
|
||||||
return {
|
return {
|
||||||
props,
|
props,
|
||||||
revalidate: REVALIDATE_TIME,
|
revalidate: REVALIDATE_TIME,
|
||||||
|
@@ -178,3 +178,8 @@ export function getProductVariant(product: Product, opts: SelectedOptions) {
|
|||||||
})
|
})
|
||||||
return variant
|
return variant
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function formatDate(dateTime:string){
|
||||||
|
let date = new Date(dateTime);
|
||||||
|
return date.toLocaleString('en-us', { month: 'long' }) + " " + date.getDate()+","+date.getFullYear();
|
||||||
|
}
|
Reference in New Issue
Block a user