时间戳

首页 > 解决方案 > 嵌套 GraphQL 查询以显示 React / GatsbyJS 中的最新博客文章

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

问题描述

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

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

我的问题如下：

有没有办法直接在我的模块中访问数据，而不通过每个父 React 组件传递数据？

在这种情况下，我使用的是 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 中的“子查询”的方式定义我的架构？

标签： reactjsgraphqlheadlessprismic.io

解决方案

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

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

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

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

推荐阅读