<Query> vs graphql Hoc，这是在 react apollo 中将 graphql 查询与组件挂钩的最佳方法答案

【问题标题】：<Query> vs graphql Hoc which is best way to hook graphql query with component in react apollo<Query> vs graphql Hoc，这是在 react apollo 中将 graphql 查询与组件挂钩的最佳方法
【发布时间】：2019-02-17 14:03:42
【问题描述】：

React Apollo 2.1 引入了<Query/> 组件，将graphql 查询与组件挂钩。

<Query query={GET_DOGS}>
{({ loading, error, data }) => {
  if (loading) return "Loading...";
  if (error) return `Error! ${error.message}`;

  return (
    <select name="dog" onChange={onDogSelected}>
      {data.dogs.map(dog => (
        <option key={dog.id} value={dog.breed}>
          {dog.breed}
        </option>
      ))}
    </select>
  );
}}

在旧版本中，我们使用 graphql Hoc 来挂钩查询。

export default compose(
  graphql(GET_DOGS)(MyComponent),
  withLoader
)(Component)

这里 withLoader HOC 处理加载、错误和数据状态。

function withLoader(WrappedComponent) {
    class comp extends React.PureComponent {
       render(){
          return this.props.isData?<WrappedComponent {...this.props}/>:<Loading/>
       }
    }
}

那么，哪种方式是挂钩查询的最佳方式，为什么？将所有使用 graphql HOC 编写的查询转移到最新的<Query/> 组件中是否明智的决定。

我没有得到任何专业人士根据 Apollo 2.1 编写查询。个人使用 hoc 编写查询看起来干净且解耦。但是有些人不建议使用 hoc。

【问题讨论】：

我没有找到任何说明 apollo 已弃用 hoc 版本的信息，但所有 apollo 的文档都使用 Query 组件，所以我认为这是建议的方式。
他们是否在做任何优化来实现查询组件？因为使用 graphql HOC，组件看起来很干净并且与查询逻辑解耦。

标签： reactjs graphql react-apollo

【解决方案1】：

恕我直言<Query/> 组件的引入只是为了简化新手的初始障碍。它们看起来像其他组件并且易于阅读。

它们的使用仅限于简单的用例 - 在更复杂的场景中使用它们很快就会变得复杂。

尝试在其他生命周期中使用来自<Query/> 的数据或尝试在一个render 中使用其中的一些（<Mutation/>）。

您很快就会重新开始编写 HOC ;)

【讨论】：