CODEWITHSUNDEEP
javascriptreactjsgatsby
Andreas
Andreas

Reputation: 188

Gatsby application crashes with error 'Cannot read property' even though property can be console logged

I am trying to use images from a headless CMS using Gatsby, but whenver I access my 'mainImage' I get an error stating TypeError: Cannot read property '<any value in the image here>' of null

I have the following query in my Gatsby blog.js page 

export const query = graphql`
  query BlogPageQuery {
    posts: allSanityPost(
      limit: 12
      sort: { fields: [publishedAt], order: DESC }
    ) {
      edges {
        node {
          id
          publishedAt
          mainImage {
        alt
        asset {
      fluid(maxWidth: 1080) {
        ...GatsbySanityImageFluid
      }
  }
}
          title
          _rawExcerpt
          slug {
            current
          }
        }
      }
    }
  }
`

The result of this is passed to a component that is responsible for generating a blog grid like so 

{data ? (
      <BlogPostPreviewGrid blogPosts={data} />
    ) : (
        <p>Could not get blog data</p>
      )
    }

the BlogPostPreviewGrid is currently only used to pass data to my BlogPostPreview component like so 

const BlogPostPreviewGrid = ({blogPosts}) => {
    return (
    <div>   

     {blogPosts.posts.edges.map (({ node }) => (
                <BlogPostPreview blogPosts={node} key={node.id}/> 

            ))}
    </div>
    )

}

My full BlogPostPreview.js component looks like this

import React from "react"


function previewFunction(props) {
  return ( 
    <div>
    <h1>{props.blogPosts.title}</h1>
    {console.log(props.blogPosts)}
    {console.log(props.blogPosts.mainImage)}
  </div>
  )
}

const BlogPostPreview = props => {

  return (

    <>
          {props ? (
          previewFunction(props)
        ) : (
            <p>Failed to get blog data in blogPreview component</p>
          )
        }
    </>
  )
}
export default BlogPostPreview

Using the console.log statments in BlogPostPreview.js I can see all my blogpostdata and my blogPosts.mainImage data. But if I try to call something in mainImage I get the error.

Example:

If I try to run

{console.log(props.blogPosts.mainImage.alt)}

See the attached screenshot to see the result of {console.log(props)} Screensot of devtools showing results of console.log(props)

My goal is to be able to use the images in the gatsby Img component like so:

   <Img fixed={props.mainImage.asset.fixed}
          alt={props.mainImage.alt}

Calling blogPopsts.title works fine, so this runs without issues and prints the expected results

<h1>{props.blogPosts.title}</h1>

Thank you for all replies and comments!

Edit: I can see the results of console.logs targeting mainImage, but the app still crashes. I also see that the 'key' field is empty

Upvotes: 2

Views: 780

Answers (1)

Francisco Ruiz
Francisco Ruiz

Reputation: 101

This is usually a thing when there is not at least one instance of the data you are trying to access existing in the cms. A workaround we have used is to have placeholder/dummy data created in the cms. Another is to set default/fall back schema using Gatsby.js schema customization (see their docs for more info.)

Also make sure you clicked published in whatever headless cms you are using. For example I have had this issue when I forgot to click on 'publish' in the cms. So the content was in draft mode which Gatsby then would not be able to get data for.

Upvotes: 2

Related Questions