xTypeError: Cannot read properties of undefined (reading 'author')-CodePudding

I'm learning to build my blog by following this Githup tutorial (https://github.com/adrianhajdin/project_graphql_blog) but when I was using [slug].js to build my localhost/3000/post/react-tesing, it puts me this error: TypeError: Cannot read properties of undefined (reading 'author') I've checked that several times but had no idea. So how can I fix this ? Thx!

[slug].js
import React from 'react'
import {getPosts, getPostDetails} from '../../services';
import {PostDetail, Categories, PostWidget, Author, Comments, CommentsForm} from '../../components';

const PostDetails = ({post}) => {
  return (
    <div className='container mx-auto px-10 mb-8'>
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
            <div className='col-span-1 lg:col-span-8'>
                <PostDetail post={post} />
                <Author author={post.author} />
                <CommentsForm slug={post.slug} />
                <Comments slug={post.slug}/>
            </div>
            <div className='col-span-1 lg:col-span-4'>
                <div className='relative lg:sticky top-8'>
                    <PostWidget slug={post.slug} categories={post.categories.map((category) => category.slug)}/>
                    <Categories />
                </div>
            </div>
        </div>
    </div>
  );
};

export default PostDetails;

my index.js - services:

export const getPostDetails = async (slug) => {
  const query = gql`
    query GetPostDetails($slug: String!) {
      post(where: {slug: $slug}) {
        title
        excerpt
        featuredimage {
          url
        }
        author{
          name
          bio
          photo {
            url
          }
        }
        createdAt
        slug
        content {
          raw
        }
        categories {
          name
          slug
        }
      }
    }
  `;
  const result = await request (graphqlAPI, query, {slug});

  return result.post;
};

CodePudding user response：

Just don't render the corresponding HTML until the post has a value.

import React from 'react'
import {getPosts, getPostDetails} from '../../services';
import {PostDetail, Categories, PostWidget, Author, Comments, CommentsForm} from '../../components';

const PostDetails = ({post}) => {
return (
<div className='container mx-auto px-10 mb-8'>
    { post && <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
        <div className='col-span-1 lg:col-span-8'>
            <PostDetail post={post} />
            <Author author={post.author} />
            <CommentsForm slug={post.slug} />
            <Comments slug={post.slug}/>
        </div>
        <div className='col-span-1 lg:col-span-4'>
            <div className='relative lg:sticky top-8'>
                <PostWidget slug={post.slug} categories={post.categories.map((category) => category.slug)}/>
                <Categories />
            </div>
        </div>
    </div> }
</div>
);
};

export default PostDetails;