时间戳

首页 > 解决方案 > 是否可以将两个 GraphQL 查询混合到一个查询中？

javascript - 是否可以将两个 GraphQL 查询混合到一个查询中？

问题描述

我使用 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>

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

标签： javascriptreactjsgraphqlgatsby

解决方案

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

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

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

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

推荐阅读