嵌套的GraphQL查询显示React/GatsbyJS中最近的博客文章

Question

我正在Gatsby/React中建立一个有两种内容类型的网站：页面和帖子，并通过GraphQL(在Prism中(查询我的数据。

我想包括一个"；最近的新闻"-模块，显示最近的博客文章。

我的问题如下：

有没有一种方法可以直接访问我的模块中的数据，而不需要通过每个父React组件传递数据？

在这种情况下，我使用的是Prism，但同样的场景可能适用于Contentful、Sanity或任何其他无头CMS。

这就是我查询数据的方式：

query pageQuery($uid: String, $lang: String) {
prismic {
allPages(uid: $uid, lang: $lang) {
edges {
node {
title
heading
body {
... on PRISMIC_PageBodyNews {
type
primary {
news_heading
}
}
}
}
}
}
allRecentPosts: allPosts(first: 2) {
edges {
node {
publish_date
title
_meta {
uid
lang
}
}
}
}
}
}

我一直在寻找实现的方法

query pageQuery($uid: String, $lang: String) {
prismic {
allPages(uid: $uid, lang: $lang) {
edges {
node {
title
heading
body {
... on PRISMIC_PageBodyNews {
type
primary {
news_heading
}
allRecentPosts: allPosts(first: 2) {
edges {
node {
publish_date
title
_meta {
uid
lang
}
}
}
}
}
}
}
}
}
}
}

现在我得到以下错误：error Cannot query field "allPosts" on type "PRISMIC_PageBodyNews" graphql/template-string，这是有意义的，因为allPosts在当前模式中是不允许的。

然而，在我尝试更改我的模式之前，我想听听是否有可能以允许"；子查询"；在GraphQL/Prismic中？

Answer 1

您可以添加根query字段或prismic字段作为某些对象类型的字段。但我不认为Prism支持这一点。

最好使用片段和/或几个graphql查询。根据您的graphql客户端和缓存策略，它仍然只能触发到服务器的一次往返。

此外，您还可以使用useContext将数据传递给深度嵌套组件。

如果您真的需要嵌套查询，那么可以看看graphql-compose。它支持将回调作为字段类型定义。因此，它不应该在类型循环和自引用方面遇到问题。