Question

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。

Answer 1

引入了

IMHO <Query/>组件只是为了简化初学者的入门障碍。它们看起来像其他组件，并且易于阅读。

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

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

您很快就会重新组成HOC；）

<query> vs graphql Hoc这是在响应阿波罗中使用组件挂钩graphql查询的最佳方法

1 个答案: