使用 Apollo 连续执行 GraphQL 查询

Question

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

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

我没有看到任何明确的方法或 Apollo 文档中提到的任何地方。如有任何帮助，我们将不胜感激！

Answer 1

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

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

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

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

Answer 2

我想首先为 GraphQL 的新手解决以下问题：如果您发现自己处于 waterfall 查询或 n + 1 GraphQL 中的查询很可能是您没有正确利用 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>
  );
}

使用 Apollo 连续执行 GraphQL 查询

Execute GraphQL queries in series using Apollo

apollo

reactjs

graphql

react-apollo