Question

我正在尝试为自己创建一个博客网站。我决定以盖茨比和内容丰富的网站来使其发展。我遵循了这个tutorial

查询代码

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

输出：

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

为什么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;`,
      },
    },

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

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

任何回应将不胜感激

Answer 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图像类型是Lighthouse评分的理想选择，因此我使用Fluid和Webp来获取图像。并使用Img标签（而非img）显示图像。

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

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

Answer 2

该问题来自于有满足感的一面，它在到达Gatsby应用程序之前（收集数据时）就中断了，这就是gatsby-remark-images无法解决问题的原因。

在Contentful中处理图像时，必须为新架构（featuredImage）上传虚拟图像。只是要通过GraphQL查询检索的图像。之后，您可以将该图像替换为最终内容。

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

特征图像未出现在GraqhiQL和盖茨比中

2 个答案: