时间戳

首页 > 解决方案 > 当使用 `react-apollo` 将组件绑定到查询时，我应该使用 `` 组件还是 `graphql()` 函数？

reactjs - 当使用 `react-apollo` 将组件绑定到查询时，我应该使用 `` 组件还是 `graphql()` 函数？

问题描述

在构建新react-apollo应用程序并尝试将我的组件绑定到 graphql 查询时，我对最佳实践感到困惑。

例如，我似乎在react-apollo文档中的某些地方建议我使用<Query>：

const GET_ALL_DOGS = gql`
  query {
    dogs {
      id
      breed
      displayImage
    }
  }
`;

const Feed = () => (
  <Query query={GET_DOGS}>
    {({ loading, error, data }) => {
      if (error) return <Error />
      if (loading || !data) return <Fetching />;

      return <DogList dogs={data.dogs} />
    }}
  </Query>
)

文档中的其他地方建议我使用该graphql()功能：

function TodoApp({ data: { todos } }) {
  return (
    <ul>
      {todos.map(({ id, text }) => (
        <li key={id}>{text}</li>
      ))}
    </ul>
  );
}

export default graphql(gql`
  query TodoAppQuery {
    todos {
      id
      text
    }
  }
`)(TodoApp);

查看示例和文档，它似乎<Query>代表 的一个子集graphql()，在这种情况下，您最好graphql()全面使用它，但我想我听说 using<Query>是首选方法，而且它似乎已被使用在react-apollo文档中的教程中更常见。

对新手的任何帮助将不胜感激。谢谢！

标签： reactjsgraphqlreact-apolloapollo-client

解决方案

TL;DR 了解渲染道具和高阶组件背后的原因，然后选择最适合您的。

与其给你我对使用哪个的意见，我认为这对你和你的持续学习来说可能是最好的，指出这是使用两个非常重要的 React 模式的两个实现：渲染道具（或作为子组件的函数）和高阶组件（HOC）。Apollo 允许您选择最适合您的。你应该知道他们两个，因为你会在很多地方遇到这两个。

第一个示例是 Render Props 实现。这对阿波罗来说是新的。第二个例子是 HOC 实现。

Apollo 有一篇很棒的博客文章解释了他们为什么在 Medium 上为 Apollo 客户端实现渲染道具。请参阅https://blog.graph.cool/tutorial-render-props-in-react-apollo-2-1-199e9e2bd01e。

谷歌更多。关于哪个更好，一直存在争论。

推荐阅读