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

Question

我正在使用 Gatsby/React 构建一个网站，其中包含 2 种内容类型：Pages 和 posts 并通过 GraphQL 查询我的数据（在棱镜中）。

我想在页面上包含一个“最新消息”模块，显示最新的博文。

我的问题如下：

Is there a way to access the data directly in my module, without passing the data through every parent React component?

在这种情况下我使用的是 Prismic，但我猜同样的情况可能适用于 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 字段作为某些对象类型的字段。但是我认为Prismic不支持这个。

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

您也可以只使用 useContext 将数据传递给深层嵌套组件。

如果您确实需要嵌套查询，请查看 graphql-compose。它支持回调作为字段类型定义。所以它不应该有类型循环和自引用的问题。

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

Nested GraphQL query to show latests blog posts in React / GatsbyJS

headless

reactjs

graphql

prismic.io