React GraphQL Apollo - 如何一次获取多次答案

【问题标题】：React GraphQL Apollo - how to fetch multiple times at onceReact GraphQL Apollo - 如何一次获取多次
【发布时间】：2017-10-05 21:15:01
【问题描述】：

我有一个组件，它通过一个带有参数的查询来获取数据。我想让这个组件调用这个查询两次，根据道具使用不同的参数（所以以后可能会更多次）。我怎样才能做到这一点？这是我的代码示例：

...
const getUser = gql`
  query getUser($last_name: String!, $first_name: String!) {
    user(last_name: $last_name, first_name: $first_name) {
      id
      last_name
      first_name
    }
  }
`
export default graphql(
  getUser, {
  options: (props)=>{
    return {
    variables: {
      last_name: ...something from props,
      first_name: ...something from props
    }
  }
}
})(ComponentClassName)

通常我会根据道具获取合适的用户。没关系。但现在，我想使用这个组件并能够获取更多用户，而无需更改后端和太多前端。至少我需要能够通过 props 定义要获取哪些用户，以及是否有一个或多个。我怎样才能做到这一点？谢谢。

【问题讨论】：

标签： reactjs graphql apollo react-apollo

【解决方案1】：

我想你在这里寻找的是compose。有了它，您可以在一个组件上执行多个 graphql 操作。我实现了一个here，它由query 和mutation 组成。

您可以使用它来组合两个查询，因为它们都具有上述不同的道具。

【讨论】：

这就是我需要的，它可以完全解决我的问题 - 有没有办法完全设置组件的突变？当我从 componentDidMount 调用 Rest api 时，我几乎可以在那里写任何东西。我也需要 GraphQL 相同的功能（因为我使用的是动态 GraphQL 后端，我的应用程序的用户可以选择他们想要的数据获取）

【解决方案2】：

听起来您正在使用这个组件（我们称之为User）作为另一个拥有用户列表的组件（我们称之为UserList）的一部分。

我在这里看到了两种解决方案：

https://dev-blog.apollodata.com/query-batching-in-apollo-63acfd859862

您在UserList 中获取每个User 所需的所有数据，然后将其作为道具传递。不会在每个 User 组件中进行查询。

希望有帮助！

【讨论】：

这就是我需要的，它可以完全解决我的问题 - 有没有办法完全设置组件的突变？当我从 componentDidMount 调用 Rest api 时，我几乎可以在那里写任何东西。我也需要 GraphQL 相同的功能（因为我使用的是动态 GraphQL 后端，我的应用程序的用户可以选择他们想要的数据获取）
您可以从组件本身如下调用突变：this.props.mutate({ variables: { ... } }).then(({ data }) => { // do something if it succeeds }).catch(error => { // do something else if it fails }); dev.apollodata.com/react/mutations.html 中有更多关于此的信息。
对不起，我的意思是查询 - 自定义查询