如何选择性地查询盖茨比内容富文本中的引用?

Question

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

首先，我在Contentful中创建了一个内容模态，其中包含一个名为"body"的富文本，然后我创建了一个包含一些随机文本的条目。在Gatsby中，当我尝试通过GraphQL资源管理器查询数据时，我可以查询到"raw";字段在"正文"内。"references"字段不能被查询，除非我添加至少一个图像资产(即"虚拟内容")。

下面是我的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日:

对于今天也在与这个问题作斗争的任何人:在深入研究了大量的文档和答案之后，我发现这实际上是基于源代码的插件的局限性之一。简而言之，插件(v4)，正如它在其文档中所述:

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

不确定这是否会在未来的版本中得到解决，但目前，需要在您的富文本正文中添加至少一个虚拟内容(嵌入图像，链接等)，以便插件创建"引用"。

这里是官方讨论区

Answer 1

如果想法是只查询references，如果它们可用，您需要自定义GraphQL模式，使字段为空(意味着它可以为空，null)，因为默认情况下，推断它不是。

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

这将是理想的解决方案。或者，根据这篇Medium文章，您可以通过将违规节点包装在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操场(localhost:8000/___graphql)

其他资源:

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