FeaturedImage 没有出现在 GraqhiQL 和 Gatsby 中答案

【问题标题】：featuredImage does not appear in GraqhiQL , GatsbyFeaturedImage 没有出现在 GraqhiQL 和 Gatsby 中
【发布时间】：2020-08-05 01:21:35
【问题描述】：

我正在尝试为自己开发一个博客网站。我决定用 gatsby 和内容来制作它。我关注了这个tutorial

查询代码

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

输出：

"message": "Cannot query field \"featuredImage\" on type \"ContentfulBlogPost\".",

为什么 featuresImage 没有出现在 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;`,
      },
    },

我已经添加了 gatsby-image 和 gatsby-remark-images 但它没有帮助。

如果您对此主题有任何想法，请回复。

任何回复将不胜感激

【问题讨论】：

标签： reactjs gatsby graphiql

【解决方案1】：

Gatsby 提供 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
        }
      } 
    }
  }
`

正如您所看到的查询，您可以使用流体或固定来获取图像。我使用流体和 webp 获取图像，因为 webp 图像类型是 Lighthouse score 的完美选择。并使用 Img 标签（不是 img）来显示图像。

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

https://www.gatsbyjs.org/packages/gatsby-image/

【讨论】：

【解决方案2】：

问题来自 Contentful 方面，它在到达您的 Gatsby 应用程序之前中断（收集数据时），这就是您的 gatsby-remark-images 无法修复它的原因。

在 Contentful 中处理图像时，您必须为您的新架构上传一个虚拟图像 (featuredImage)。只是要使用 GraphQL 查询检索的图像。之后，您可以将此图像替换为您的最终内容。

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

【讨论】：