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

Question

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

Answer 1

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

默认情况下，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 的中间位置，我认为最好在此处放置示例供任何人在搜索主题时找到。

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

How to perform multiple queries with Apollo graphql HOC?

apollo

reactjs

graphql

react-apollo

react-hoc