时间戳

首页 > 解决方案 > 什么是 gatsbyContentfulFluid？

javascript - 什么是 gatsbyContentfulFluid？

问题描述

我正在学习 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
        }
      }
    }
  }
`

我得到了一切，但没有得到。..GatsbyContentfulFluid在我的 GraphQL 查询服务器上。有人请解释一下...GatsbyContentfulFluid是什么？为什么我们将它与扩展运算符一起使用？在创建内容数据时我是否错过了一些东西，这就是为什么我没有进入...GatsbyContentfulFluid我的 GQL 查询游乐场？

标签： javascriptreactjsgraphqlgatsbycontentful

解决方案

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

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

假设我们的应用中有一个相对复杂的页面，可以让我们并排查看两个英雄以及他们的朋友。您可以想象这样的查询很快就会变得复杂，因为我们需要至少重复一次字段 - 比较的每一侧都有一个。

这就是 GraphQL 包含称为片段的可重用单元的原因。片段让您可以构建字段集，然后将它们包含在您需要的查询中。这是一个如何使用片段解决上述情况的示例：

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

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

由于 GraphiQL 的限制，片段在 GraphQL 游乐场中不可用：

请注意，由于 GraphiQL 的限制，您目前无法在 GraphiQL IDE 中使用这些片段。

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

推荐阅读