是否可以将两个 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
        }
      }
    }
}

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

<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 对象，您始终可以使用原生 JavaScript 过滤或做任何您需要的操作来操作它们。这个想法是创建一个空对象并用链接和标签填充它，在一个循环中或使用两个不同的，然后，在你的组件中，迭代这个对象而不是像你现在做的那样通过props。

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

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