如何使用 Apollo graphql HOC 执行多个查询？

Question

我正在编写一个网络应用程序，我需要查询 Apollo 的本地状态以及远程 API。 Apollo graphql HOC 不允许发送多个查询，但提供了一些 compose 功能。但似乎@apollo/react-hoc 包没有它。不幸的是，将本地状态请求编写成远程状态请求不起作用（根据 DevTools，请求已发送，但未提供数据）。 Redux 的compose 无论如何都没有帮助（嗯，我很清楚为什么会这样）。 没有 React hooks 解决这个问题的最佳方法是什么？

Answer 1

根据@apollo/react-hoc docs，您似乎可以通过将一个查询嵌套在另一个查询中来运行多个查询。

默认情况下，graphql 钩子将数据作为data 属性注入，因此对于多个查询，如果没有额外的配置，它将无法工作。 config.name 来救援，因此您可以为注入的道具指定不同的名称，而不是 data。

export default(
  graphql(
    query1, 
    {name: "data1"}
  )(
    graphql(
      query2, 
      {name: "data2"}
    )(YourComponent)
  )
)

看起来太冗长了。所以recompose（本质上是redux）compose 会帮助你：

export default compose(
  graphql(query1, {name: "data1"}),
  graphql(query2, {name: "data2"})
)(YourComponent);

说实话，这种方法（使用compose）在他们的文档中有所描述，但由于它位于描述config 的中间位置，我认为最好将示例放在这里供任何人在搜索时找到为主题。