是否可以将两个 GraphQL 查询混合为一个查询？

Question

我使用 Gatsby 作为 WordPress 后端的前端。 我已成功获取菜单项，但现在需要将它们链接到我创建的页面。 我已经在我的 Gatsbyconfig.js 中添加了菜单链接，但我不知道如何将它与菜单本身同时映射到菜单项。 它最终相互矛盾。 这可能吗？ 我是 graphQL 的新手。 在这个项目之前从未接触过它。 下面是GraphQl查询

{
   allWpMenuItem(filter: {menu: {node: {name: {eq: "Navigation Menu"}}}}) {
      edges {
        node {
          label
        }
      }
    }
    site {
      siteMetadata {
        title
        menuLinks {
          name
          link
        }
      }
    }
}

label 包含每个菜单的名称，链接包含指向我创建的页面的链接。 我正在尝试将其修复到这段代码中

<div>
        {props.allWpMenuItem.edges.map(edge =>( 
            <a href="#" key={edge.node.label}>
                {edge.node.label}
            </a>
          
        ))}
      </div>

我正在尝试查询菜单链接，将锚标记更改为链接项，然后将其指向菜单链接。

Answer 1

简短的回答是你不能，每个查询本身都是一个单独的实体。 但是，您可以使用createResolvers组合查询，有关更多详细信息，请查看： https://github.com/gatsbyjs/gatsby/discussions/28275 （感谢LekoArts的反馈）。

但是，您有一些方法可以绕过此限制。 鉴于每个查询都转换为独立的 JavaScript object，您始终可以使用本机 JavaScript 过滤或执行任何您需要的操作来操作它们。 这个想法是创建一个空的 object 并用链接和标签填充它，在一个循环中或使用两个不同的，然后，在你的组件中，迭代这个 object 而不是像你现在做的那样通过props 。

如果不知道内部结构或不知道menuLinks.name里面的内容，我就无法创建一个最小的示例。

顺便说一句，如果您使用的是内部导航，我几乎不建议使用<Link>组件，除此之外，使用@reach/router （从 React 的路由器扩展）只会渲染每个组件的必要部分，创建比使用原生锚标记，刷新所有页面。