javascript - 什么是 gatsbyContentfulFluid？

Question

我正在作为新手学习 Gatsby 和 GraphQL，并关注这篇文章 https://ibaslogic.com/gatsby-with-contentful-cms/

它有这样的代码:

export const query = graphql`
  query($slug: String!) {
    contentfulBlogPost(slug: { eq: $slug }) {
      title
      publishedDate(formatString: "Do MMMM, YYYY")
      featuredImage {
        fluid(maxWidth: 750) {
          ...GatsbyContentfulFluid
        }
      }
    }
  }
`

我得到了一切，但在我的 GraphQL 查询服务器上没有得到 ...GatsbyContentfulFluid 。 C 有人请解释一下 ...GatsbyContentfulFluid 是什么？ 为什么我们将它与展开运算符一起使用？ 我在创建 Contentful 数据时是否错过了某些内容，这就是为什么我在 GQL 查询 Playground 中没有得到 ...GatsbyContentfulFluid 的原因？

Answer 1

它不是我们在 JavaScript 中所知的展开运算符，在 GraphQL 中代表查询片段。

片段是一种使用可重用单元查询一组字段的方法。来自 GraphQL docs :

Let's say we had a relatively complicated page in our app, which lets us look at two heroes side by side, along with their friends. You can imagine that such a query could quickly get complicated, because we would need to repeat the fields at least once - one for each side of the comparison.

That's why GraphQL includes reusable units called fragments. Fragments let you construct sets of fields, and then include them in queries where you need to. Here's an example of how you could solve the above situation using fragments:

在您的情况下，该片段由 gatsby-source-contentful 提供。基本上，就是从 Contentful 查询流动 Assets ，就像使用 gatsby-image 时通常所做的那样对于本地文件。

换句话说，通过 ...GatsbyContentfulFluid 片段，您可以从内容 Assets 中获取必填字段，从而允许您在 Assets 中使用 gatsby-image。

由于 GraphiQL 的限制，Fragment 在 GraphQL Playground 中不可用:

Note, due to a limitation of GraphiQL, you can not currently use these fragments in the GraphiQL IDE.

因此，您可以使用片段(实际上，您应该)，但您需要直接在代码中检查获取的数据(通过 console.logs 或通过调试断点)，因为它们不可用在 GraphQL Playground 中。