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

Posted 2023-03-08

【中文标题】<Query> vs graphql Hoc，这是在 react apollo 中将 graphql 查询与组件挂钩的最佳方法

【英文标题】：<Query> vs graphql Hoc which is best way to hook graphql query with component in react apollo

【发布时间】：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，组件看起来很干净并且与查询逻辑解耦。

【参考方案1】：

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

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

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

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