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

【问题标题】：When using `react-apollo` to bind component to a query, should I use the `<Query>` component or the `graphql()` function?当使用 `react-apollo` 将组件绑定到查询时，我应该使用 `<Query>` 组件还是 `graphql()` 函数？
【发布时间】：2018-10-12 02:33:18
【问题描述】：

在构建新的 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()，但我想我听说过使用<Query> 是首选方法，并且在react-apollo 文档的教程中似乎更常用。

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

【问题讨论】：

你可以使用任何一个，这是一个偏好问题。使用 graphql 函数是 react-apollo 2.1 之前的标准，顺便说一句，它仍然支持它。使用 <Query> 是在 react-apollo 2.1 中引入的，我个人认为它看起来更干净。

标签： reactjs graphql react-apollo apollo-client

【解决方案1】：

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

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

第一个例子是渲染道具的实现。这对阿波罗来说是新的。第二个例子是 HOC 实现。

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

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

【讨论】：

很棒的答案。谢谢@casey！

【解决方案2】：

对于更小、更简单的情况，请随意使用两者。他们中的任何一个都没有太大的优势。但是我在大规模、复杂的情况下都使用过，我可以告诉你，Query 和 Mutation 组件的简单性将在此过程中为你节省大量时间和头痛。

graphql() 的另一个缺点是它更有可能迫使您为查询组件创建一个父组件来处理您的变量（在大多数情况下）。

另外，我个人更喜欢处理道具和元素，而不是在大括号中定义所有内容并处理嵌套对象和缩进。当 graphql() 中的选项和变量增长时，它很容易失控:)

【讨论】：

【解决方案3】：

React-apollo 2.1 发布了新组件 Query 和 Mutation。在我看来，Apollo 团队在 react-apollo 模块中构建了伟大的 GraphQL 生态系统，这是巨大的进步。对于最佳实践，我认为您应该使用 Query 组件，因为从现在开始，所有使用 GraphQL 客户端的前端开发人员都在使用 Query 和 Mutation 组件，但它是了解如何使用 graphql() 的一个选项。第一次在突变中使用 graphql() 有点奇怪。

【讨论】：