使用 Apollo 串行执行 GraphQL 查询答案

【问题标题】：Execute GraphQL queries in series using Apollo使用 Apollo 串行执行 GraphQL 查询
【发布时间】：2018-10-07 14:04:46
【问题描述】：

我正在尝试连续进行多个 grahql 查询。这里的问题是我必须使用来自一个的响应并将其作为变量传递给下一个。

我尝试过使用延迟和负载。但是，我的查询是在组件安装上定义的，因此它确实需要预先设置变量。因此这种方法对我不起作用。

我没有看到任何明确的方法来执行此操作或 Apollo 文档中提到的任何地方。任何帮助将不胜感激！

【问题讨论】：

见 this post - 你可以使用 Apollo fetch 发送与你的组件分开的 apollo graphql 查询
为什么不在一个 graphql 查询中请求多个内容？

标签： reactjs graphql apollo react-apollo

【解决方案1】：

我想首先为刚接触 GraphQL 的人解决以下问题：如果您发现自己在 GraphQL 中有 waterfall 查询或 n + 1 个查询您很可能没有正确利用 GraphQL API，或者您的 GraphQL API 设计不当。可能存在单一用例，这是您处理这种情况的唯一方法，我只是假设 OP 已经试图避免这种情况。

以下内容专为"react-apollo": ">2.1" 设计。使用 2 个 graphql HOCs 和 skip 查询选项可以实现相同的目的。这个想法是使用skip 选项延迟第二个查询，直到第一个查询的数据可用。

免责声明：以下代码未经测试，仅用于传达一般思想或模式。

function MyComponent() {
  return (
    <Query query={QUERY1}>
      {query1 => (
        <Query
          query={QUERY2}
          variables={{ x: query1.data.x }}
          skip={query1.loading}
        >
          {query2 => (
            <div>
              {JSON.stringify({
                query1Data: query1.data,
                query2Data: query2.data
              })}
            </div>
          )}
        </Query>
      )}
    </Query>
  );
}

【讨论】：

【解决方案2】：

您可以手动触发查询并将它们链接起来。

const { data } = await client.query({
  query: QUERY1,
  variables: { search: "Fruits" }
});

const { data2 } = await client.query({
  query: QUERY2,
  variables: { search: data.apple }
});

将此代码封装在async 函数中。

【讨论】：