reactjs - 与 graphql Hoc 这是在 React apollo 中将 graphql 查询与组件 Hook 的最佳方式

Question

React Apollo 2.1介绍<Query/>组件将 graphql 查询与组件 Hook 。

<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 来 Hook 查询。

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/>
       }
    }
}

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

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

Answer 1

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

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

尝试使用 <Query/> 中的数据在其他生命周期中或尝试在一个 <Mutation/> 中使用其中的一些( render ) .

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