如何在 gatsby Contentful Rich Text 中有选择地查询引用？

Question

我正在尝试创建一个博客页面，可以选择显示任何存在的图像资源。

首先，我在 Contentful 中创建了一个内容模式，其中包含一个名为“Body”的富文本，然后我创建了一个包含一些随机文本的条目。在 Gatsby 中，当我尝试通过 GraphQL 资源管理器查询数据时，我可以查询“正文”内的“原始”字段。除非我添加至少一个图像资产（又名“虚拟内容”），否则无法查询“参考”字段。

下面是我的 graphql 查询

export const query = graphql`
  query ($slug: String!) {
    contentfulBlog(slug: { eq: $slug }, node_locale: { eq: "en-US" }) {
      title
      body {
        raw
        references {
          ... on ContentfulAsset {
            contentful_id
            __typename
            gatsbyImageData(formats: AUTO, layout: FULL_WIDTH)
          }
        }
      }
    }
  }
`

上述查询的问题在于，如果在 post 中未找到图像资源，则会中断查询。我的目标是能够在有可用资产时有选择地查询引用字段。但是我不知道该怎么做。

** 2021 年 8 月 24 日更新：

致今天还在为这个问题苦苦挣扎的任何人：在浏览了大量文档和答案后，我发现这实际上是 gatsby-source-contentful 插件的局限性之一。简而言之，插件 (v4)，正如它在 documentation:

中所述

At the moment, fields that do not have at least one populated instance will not be created in the GraphQL schema.

不确定这是否会在未来的版本中解决，但目前，需要在您的富文本正文中添加至少一个虚拟内容（嵌入图像、链接等），以便在 graphql 模式中创建“引用”字段的插件。

这里是官方discussion thread

Answer 1

如果想法是仅查询 references 如果它们可用，则需要 customize the GraphQL schema 使字段可为空（这意味着它可以为空，null）因为，通过默认情况下，推断不是。

您可以在以下位置检查 Contentful 内容类型：https://www.contentful.com/developers/docs/references/content-delivery-api/#/reference/content-types/content-model

这将是理想的解决方案。或者，根据此 Medium article，您可以通过将违规节点包装在 Node 类型对象中来绕过它。你的情况：

export const query = graphql`
  query ($slug: String!) {
    contentfulBlog(slug: { eq: $slug }, node_locale: { eq: "en-US" }) {
      title
      body {
        raw
        references {
          ... on Node {
            ... on ContentfulAsset {
              contentful_id
              __typename
              gatsbyImageData(formats: AUTO, layout: FULL_WIDTH)
            }
          }
        }
      }
    }
  }
`

您可能需要对其进行调整。在不知道您的数据和模式结构的情况下，不可能猜测上面的查询是否会单独工作，但请理解。在 GrahiQL playground (localhost:8000/___graphql)

中查看

其他资源：

如何在 gatsby Contentful Rich Text 中有选择地查询引用？

How to optionally query references in gatsby Contentful Rich Text?

richtext

reactjs

contentful

graphql

gatsby