Apollo 2.1中的多个查询/变异

Question

我需要一些帮助,使用Apollo 2.1中的新Query和Mutation组件,特别是有多个查询和突变.

我有以下问题:

1. 我有一个graphql请求,取决于以前的graphql结果,我该如何处理？
2. 如何在已经有查询的组件中添加两个不同的突变(在我的组件中我需要做两个不同的操作)？

Answer 1

你应该嵌套它们.从文档中查看此示例:

const NumbersWithData = () => (
  <Query query={QueryOne}>
    {({ loading: loadingOne, data: { one } }) => (
      <Query query={QueryTwo}>
        {({ loading: loadingTwo, data: { two }}) => {
          if (loadingOne || loadingTwo) return <span>loading...</span>
          return <h3>{one} is less than {two}</h3>
        }}
      </Query>
    )}
  </Query>
);

为了帮助保持嵌套的可管理性,您可以检查react-adopt.他们有一个Apollo ToDo应用程序示例,它们结合了Query和多个Mutations.

Answer 2

为此react-apollo导出compose功能。使用此功能，您可以一次干净地使用多个组分增强剂。包括多个graphql（）甚至Redux connect（）增强器。

import { Mutation, compose, graphql } from "react-apollo";

class AddTweet extends Component {
....
....
....
}
export default compose(
  graphql(GET_AUTHORS, { name: "getAuthors" }),
  graphql(ADD_TWEET, { name: "addTweet" }),
  connect(...), // incase you are using Redux
)(AddTweet);

一个重要的注意事项是compose()首先执行最后一个增强器，然后在增强器列表中向后运行。

还有一件事可以说您this.props.data现在正在使用，您将获得get undefined。正义console.log(this.props)，您将看到道具现在正在发生什么。您将现在有两个属性getAuthors和addTweet。所以现在是this.props.name-in-compose.name-of-type-in-typeDefsie this.props.getAuthors.getUsers。我花了一点时间才弄清楚。

Answer 3

在我看来，

1. 要发出依赖于先前请求的请求，您可以将该请求中断给子组件，并将先前请求的结果传递props给它并执行该请求。

2. 要使用多个突变和查询，您可以compose这样使用

   ...
   @compose(
    graphql(GET_FEEDS_QUERY, {name : 'getFeeds'}),
    graphql(CREATE_NEW_POST, {name: "createNewPost"}),
    graphql(LIKE_POST_MUTATION, { name: "unlikePostMutation"}),
    ...
   )
   class HomeScreen extends Component {
    ...
   }