Reactjs 盖茨比-无法读取属性'；childImageSharp'；空的

即使我的查询在GraphQL Explorer中给了我一个正确的结果，我也会遇到这个错误

我试图加载文章的封面图片，但我看不出哪里有错误

有很多博客帖子和相同的问题，但我没有找到正确的答案来解决这个错误

错误：TypeError:无法读取null的属性“childImageSharp”

这就是我迄今为止所尝试的：

Mdx

    ---
    title: Hello World - from mdx!
    date: 2019-06-01
    published: true
    tags: ['react', 'javascript']
    ---

盖茨比组件

const Blog = ({ data }) => {
  const tags = data.allMdx.group
  const posts = data.allMdx.nodes

  return (
    <Layout>
      <div className="hero blog-section">
        <div className="hero-body">
          <div className="container">
            <h1 className="home-title is-size-1">Blog</h1>
            <h3 className="home-subtitle is-size-4">
              Thoughts about programming, design and random stuff
            </h3>
            <div className="tags"></div>
            <div class="tags">
              {tags.map(tag => (
                <Link
                  to={`/tags/${kebabCase(tag.fieldValue)}/`}
                  className="tag is light"
                >
                  {tag.fieldValue}
                </Link>
              ))}
            </div>

            {posts.map(({ id, excerpt, frontmatter, fields }) => (
              <Link to={fields.slug}>
                <div key={id} className="card is-fullimage mb-1">
                  <Img fluid={frontmatter.cover.childImageSharp.fluid} />
                  <div className="card-stacked">
                    <div className="card-content">
                      <time className="home-red">{frontmatter.date}</time>

                      <h1 className="is-size-4">{frontmatter.title}</h1>
                      <p>{excerpt}</p>
                      <span className="home-red">
                        {fields.readingTime.text}
                      </span>
                    </div>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </div>
    </Layout>
  )
}

gatsby config.js

提前感谢

根据您的MDX：

export const query = graphql`
  query SITE_INDEX_QUERY {
    allMdx(
      sort: { fields: [frontmatter___date], order: DESC }
      filter: { frontmatter: { published: { eq: true } } }
    ) {
      group(field: frontmatter___tags) {
        fieldValue
      }
      nodes {
        id
        excerpt(pruneLength: 100)
        frontmatter {
          tags
          title
          date(formatString: "MM/DD/YYYY")
          cover {
            publicURL
            childImageSharp {
              fluid(maxWidth: 2000, traceSVG: { color: "#639" }) {
                tracedSVG
              }
            }
          }
        }
        fields {
          slug
          readingTime {
            text
          }
        }
      }
    }
  }
`

你没有在所有的帖子中都有封面图片，所以现在你正在请求

frontmatter.cover.childImageSharp.fluid

你的代码被破坏了。在以下位置添加一个简单条件：

module.exports = {
  siteMetadata: {
    title: `Lorem Ipsum Blog`,
    description: `Lorem ipsum.`,
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/images`,
        name: `images`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/posts`,
        name: `posts`,
      },
    },
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.mdx`, `.md`],
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 630,
            },
          },
        ],
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    `gatsby-plugin-sass`,
    `gatsby-plugin-dark-mode`,
    `gatsby-plugin-feed`,
    `gatsby-remark-reading-time`,
  ],
}

如果您添加了来自新ECMAScript的，可以通过以下方式简化它：

  const tags = data.allMdx.group
  const posts = data.allMdx.nodes

  return (
    <Layout>
      <div className="hero blog-section">
        <div className="hero-body">
          <div className="container">
            <h1 className="home-title is-size-1">Blog</h1>
            <h3 className="home-subtitle is-size-4">
              Thoughts about programming, design and random stuff
            </h3>
            <div className="tags"></div>
            <div class="tags">
              {tags.map(tag => (
                <Link
                  to={`/tags/${kebabCase(tag.fieldValue)}/`}
                  className="tag is light"
                >
                  {tag.fieldValue}
                </Link>
              ))}
            </div>

            {posts.map(({ id, excerpt, frontmatter, fields }) => (
              <Link to={fields.slug}>
                <div key={id} className="card is-fullimage mb-1">
                  {frontmatter.cover && <Img fluid={frontmatter.cover.childImageSharp.fluid} /> } 
                  <div className="card-stacked">
                    <div className="card-content">
                      <time className="home-red">{frontmatter.date}</time>

                      <h1 className="is-size-4">{frontmatter.title}</h1>
                      <p>{excerpt}</p>
                      <span className="home-red">
                        {fields.readingTime.text}
                      </span>
                    </div>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </div>
    </Layout>
  )
}

请记住，同时使用盖茨比清理工具清理缓存。

根据您的MDX：

export const query = graphql`
  query SITE_INDEX_QUERY {
    allMdx(
      sort: { fields: [frontmatter___date], order: DESC }
      filter: { frontmatter: { published: { eq: true } } }
    ) {
      group(field: frontmatter___tags) {
        fieldValue
      }
      nodes {
        id
        excerpt(pruneLength: 100)
        frontmatter {
          tags
          title
          date(formatString: "MM/DD/YYYY")
          cover {
            publicURL
            childImageSharp {
              fluid(maxWidth: 2000, traceSVG: { color: "#639" }) {
                tracedSVG
              }
            }
          }
        }
        fields {
          slug
          readingTime {
            text
          }
        }
      }
    }
  }
`

你没有在所有的帖子中都有封面图片，所以现在你正在请求

frontmatter.cover.childImageSharp.fluid

你的代码被破坏了。在以下位置添加一个简单条件：

module.exports = {
  siteMetadata: {
    title: `Lorem Ipsum Blog`,
    description: `Lorem ipsum.`,
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/images`,
        name: `images`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/posts`,
        name: `posts`,
      },
    },
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.mdx`, `.md`],
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 630,
            },
          },
        ],
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    `gatsby-plugin-sass`,
    `gatsby-plugin-dark-mode`,
    `gatsby-plugin-feed`,
    `gatsby-remark-reading-time`,
  ],
}

如果您添加了来自新ECMAScript的，可以通过以下方式简化它：

  const tags = data.allMdx.group
  const posts = data.allMdx.nodes

  return (
    <Layout>
      <div className="hero blog-section">
        <div className="hero-body">
          <div className="container">
            <h1 className="home-title is-size-1">Blog</h1>
            <h3 className="home-subtitle is-size-4">
              Thoughts about programming, design and random stuff
            </h3>
            <div className="tags"></div>
            <div class="tags">
              {tags.map(tag => (
                <Link
                  to={`/tags/${kebabCase(tag.fieldValue)}/`}
                  className="tag is light"
                >
                  {tag.fieldValue}
                </Link>
              ))}
            </div>

            {posts.map(({ id, excerpt, frontmatter, fields }) => (
              <Link to={fields.slug}>
                <div key={id} className="card is-fullimage mb-1">
                  {frontmatter.cover && <Img fluid={frontmatter.cover.childImageSharp.fluid} /> } 
                  <div className="card-stacked">
                    <div className="card-content">
                      <time className="home-red">{frontmatter.date}</time>

                      <h1 className="is-size-4">{frontmatter.title}</h1>
                      <p>{excerpt}</p>
                      <span className="home-red">
                        {fields.readingTime.text}
                      </span>
                    </div>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </div>
    </Layout>
  )
}

---

同时，请记住使用

gatsby clean

清理缓存。

奇怪的答案，但使用

gatsby clean

我成功地解决了这个问题。

奇怪的答案，但使用

gatsby clean

我成功地解决了这个问题。

我已经尝试过这种方法：

{frontmatter.cover&}

我根本没有得到图像。因为你的MDX没有任何封面属性，至少在你的例子中是这样。你能解释一下吗？我已经尝试过这种方法：

{frontmatter.cover&&}

我根本没有得到图像。因为你的MDX没有任何封面属性，至少在你的例子中是这样。你能解释一下吗，请