如何选择性地查询 gatsby Contentful Rich Text 中的引用？

Posted 2023-03-08

【中文标题】如何选择性地查询 gatsby Contentful Rich Text 中的引用？

【英文标题】：How to optionally query references in gatsby Contentful Rich Text?

【发布时间】：2021-10-24 03:49:09

【问题描述】：

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

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

下面是我的 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)
          
        
      
    
  
`

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

**2021 年 8 月 24 日更新：

对于今天还在为这个问题苦苦挣扎的任何人： 在挖掘了大量文档和答案后，我发现这实际上是 gatsby-source-contentful 插件的限制之一。简而言之，插件（v4），正如它在其documentation 中所述：

目前，没有至少一个填充实例的字段 不会在 GraphQL 架构中创建。

不确定是否会在未来的版本中解决此问题，但目前，需要在富文本正文中添加至少一个虚拟内容（嵌入图像、链接...等）才能使插件在 graphql 架构中创建“references”字段。

这里是官方discussion thread

【参考方案1】：

如果这个想法是只查询references 是否可用，您需要customize the GraphQL schema 使该字段可以为空（意味着它可以为空，null），因为默认情况下，推断它不是' t.

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

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

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 操场上查看 (localhost:8000/___graphql)

其他资源：

https://github.com/gatsbyjs/gatsby/issues/20696 https://github.com/gatsbyjs/gatsby/pull/20794

【讨论】：

感谢您的帮助！非常感谢！