Reactjs featuredImage不会出现在盖茨比的GraqhiQL中

我正试图为自己开发一个博客网站，我决定和盖茨比一起开发。我遵循了这一点

查询代码

query MyQuery {
  allContentfulBlogPost {
    edges {
      node {
        author {
          name
        }
        createdAt
        body {
          body
        }
        title 
        featuredImage {
          file {
            url
          }
        }
      }
    }
  }
}

输出：

“消息”：“无法查询类型为“ContentfulBlogPost\”的字段\“featuredImage\”，

为什么featuredImage没有出现在allContentfulBlogPost中？我怎样才能找到它

我的gatsby-config.js文件：

plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-image`,
    `gatsby-transformer-remark`,
    {
      resolve: `gatsby-remark-images`,
      options: {
        maxWidth: 740,
        wrapperStyle: `margin-bottom: 2.2rem;`,
      },
    },

我已经添加了盖茨比图片和盖茨比评论图片，但没有帮助

如果你对这个话题有任何想法，请回复

---

如果您有任何回复，我们将不胜感激。

这个问题来自知足的一面，它在到达您的盖茨比应用程序（收集数据时）之前就中断了。这就是为什么您的

盖茨比评论图像

无法解决它的原因

当处理内容丰富的图像时，必须为新模式上载虚拟图像（

featuredImage

）。只需使用GraphQL查询检索一个图像。之后，您可以替换此图像作为最终内容

---

这是因为在内部，如果您不为

allContentfulBlogPost

内容模型至少上传一次图像，GraphQL模式无法推断图像的类型（也可能发生在其他类型的其他字段中）。这是一个已知的错误，必须通过这种方式绕过，直到他们修复它。

盖茨比提供了GraphQL来获取数据，而无需注释

import { graphql } from "gatsby"

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    contentfulBlog(slug: { eq: $slug }) {
      blogTitle
      blogImage {
        fluid (maxWidth: 500) {
          ...GatsbyContentfulFluid_withWebp
        }
        title
        resize {
          src
          width
          height
        }
      } 
    }
  }
`

正如您看到的查询，您可以使用fluid或fixed获取图像。 我使用fluid和webp获取图像，因为webp图像类型是灯塔分数的完美选择。 并使用Img标签（非Img）显示图像

<Img fluid={post.blogImage.fluid} alt={post.blogImage.title} />