Encountering a frustrating issue while trying to run my Next.js application for production build. The problem seems to be related to the "blogpost" parameter in the following codeblock:
import React from "react";
import Slab from "../../component/Slab/Slab";
import styles from "../../styles/slug.module.css"
import { GraphQLClient, gql } from "graphql-request";
import { RichText } from '@graphcms/rich-text-react-renderer';
const graphcms = new GraphQLClient(
" https... ",
);
const QUERY = gql`
query Blogpost($slug: String!) {
blogpost(where: {slug: $slug}) {
title
publishedAt
synopsis
post {
raw
}
}
}
`;
const SLUGLIST = gql`
{
blogposts {
slug
}
}
`;
export async function getStaticPaths() {
const { blogposts } = await graphcms.request(SLUGLIST);
return {
paths: blogposts.map((blog: { slug: any; }) => ({ params: { slug: blog.slug } })),
fallback: true,
}
}
export async function getStaticProps({ params }:any) {
const slug = params.slug;
const blogData = await graphcms.request(QUERY, { slug });
return {
props: {
blogpost: blogData,
},
revalidate: 10,
};
}
export default function blogsSingle({ blogpost }:any) {
console.log(blogpost)
return (
<Slab>
<div className={styles.blogcontainer}>
<div className={styles.latestblog}>
<br />
<article>
<h1>{blogpost.blogpost.title}</h1>
</article>
</div>
</div>
</Slab>
);
};
Despite working fine in NPM RUN DEV mode, I encounter an error when trying NPM RUN BUILD or attempting deployment on Vercel.
TypeError: Cannot read properties of undefined (reading 'blogpost')If "blogpost" was undefined, why wouldn't it also throw an error during RUN DEV? Seeking assistance as I navigate through JavaScript, Next.js, and TypeScript, facing some roadblocks along the way. For those curious about the console log output of 'blogpost':
{ blogpost: { title: 'QRD...', publishedAt: '2022-12-10T03:37:42.781869+00:00', synopsis: 'My introduction.', post: { raw: [Object] } } }
Attempted solutions include:
- Reordering queries in the return(), which yields mixed results with undefined issues during build most of the time.
- Using "blogpost.blogpost" property in the return(), as it displays the GraphQL query correctly during development - akin to extracting children in any GraphQL query.
"blogpost param > blogpost type > then you can get to the rest of the children."
Verified Hygraph API fields presence, confirmed successful API call logging in CLI/Dev Console.
Avoiding an 'if' statement workaround since these variables should be defined without needing such measures.
Identifying this specific file as the culprit, as removing the return() allows for successful deployment.
The expectation is that what works in development mode should seamlessly transition to build mode, potentially missing a simple detail. Any guidance would be greatly appreciated.