Question

在构建新的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是首选方法，它似乎在FirstOrDefault文档的教程中更常用。

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

Answer 1

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

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

第一个例子是Render Props实现。它是阿波罗的新手。第二个例子是HOC的实现。

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

Google更多。关于哪个更好，正在进行辩论。

Answer 2

React-apollo 2.1发布了新的组件Query and Mutation。从我的观点来看，Apollo团队在react-apollo模块中构建了出色的GraphQL生态系统。对于最佳实践，我认为您应该使用Query组件，因为从现在开始使用GraphQL客户端的所有前端开发人员都使用Query and Mutation组件，但它是一个知道如何使用graphql（）的选项。有点奇怪的是第一次在变异中使用graphql（）。

Answer 3

对于更小，更简单的情况，可以随意使用。它们中的任何一个都没有多大优势。但是我已经在大规模，复杂的案例中使用了这两种情况，我可以告诉你，Query和Mutation组件的简单性将为你节省很多时间和头痛。

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

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

当使用`react-apollo`将组件绑定到查询时，我应该使用`<query>`组件还是`graphql（）`函数？

3 个答案: