Приложение Gatsby аварийно завершает работу с ошибкой «Не удается прочитать свойство», даже если свойство может быть зарегистрировано в консоли

Question

Я пытаюсь использовать изображения из безголовой CMS с помощью Gatsby, но всякий раз, когда я получаю доступ к своему mainImage, я получаю сообщение об ошибке TypeError: Cannot read property '<any value in the image here>' of null

У меня есть следующий запрос в моем блоге Gatsby. 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
          }
        }
      }
    }
  }
`

Результат этого передается компоненту, который отвечает за генерацию сетки блога, например

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

BlogPostPreviewGrid в настоящее время используется только для передачи данных в мой Компонент BlogPostPreview выглядит примерно так:

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

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

            ))}
    </div>
    )

}

Мой полный компонент BlogPostPreview. js выглядит следующим образом

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

Использование статистики console.log в BlogPostPreview. js Я вижу все свои blogpostdata и мои данные blogPosts.mainImage. Но если я пытаюсь вызвать что-то в mainImage, я получаю сообщение об ошибке.

Пример:

Если я попытаюсь запустить

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

См. Прикрепленный снимок экрана, чтобы увидеть результат {console.log(props)} Скриншот devtools, показывающий результаты консоли .log (props)

Моя цель - использовать изображения в компоненте gatsby Img следующим образом:

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

Вызов blogPopsts.title работает нормально, так что запускается без проблем и печатает ожидаемые результаты

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

Спасибо за все ответы и комментарии!

Редактировать: я вижу результаты console.logs, нацеленные на mainImage, но приложение по-прежнему падает , Я также вижу, что поле 'key' пусто

Answer 1

Обычно это происходит, когда в cms отсутствует хотя бы один экземпляр данных, к которым вы пытаетесь получить доступ. Обходной путь, который мы использовали, - это создание в cms заполнителей / фиктивных данных. Другой способ - установить схему по умолчанию / отступить с помощью настройки схемы Gatsby. js (дополнительную информацию см. В их документах.)

Также убедитесь, что вы щелкнули по опубликованным ссылкам, которые вы используете. Например, у меня была эта проблема, когда я забыл нажать «publi sh» в cms. Таким образом, контент находился в черновом режиме, для которого Гэтсби тогда не смог бы получить данные.