时间戳

首页 > 解决方案 > vs graphql Hoc，这是在 react apollo 中将 graphql 查询与组件挂钩的最佳方法

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

问题描述

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。

标签： reactjsgraphqlreact-apollo

解决方案

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

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

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

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

推荐阅读