Question

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

我有以下问题：

我有一个graphql请求，它取决于之前的graphql结果，我该如何处理？
如何在已经有查询的组件中添加两个不同的突变（在我的组件中我需要做两个不同的操作）？

Answer 1

你应该筑巢它们。请参阅docs：

中的此示例

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现在你会得到undefined。只需console.log(this.props)，您就会看到道具现在发生了什么。您现在将拥有两个属性getAuthors和addTweet。现在它将是this.props.name-in-compose.name-of-type-in-typeDefs，即this.props.getAuthors.getUsers。我花了一点时间才弄明白。

Answer 3

在我看来，

要发出请求取决于之前的请求，您可以将该请求分解为子组件，并将之前请求的结果（如props）传递给它，并执行该请求。

要使用多个变异和查询，您可以使用compose这样的

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

Answer 4

我写了一篇关于如何在同一个Component上组合Mutation和Query的Medium Post。这是帖子的片段

['%', 'P', 'D', 'F', '-', '1', '.', '4', '\\', 'n', '%', '\\', 'x', '9', '3', '\\', 'x', '8', 'c', '\\', 'x', '8', 'b', '\\', 'x', '9', 'e']

Answer 5

除了使用compose中的react-apollo之外，您可以检出的另一个实用工具库是react-adopt。一个强大的小型实用程序库，它可以帮助您组成多个 render props类型的组件，以使您没有嵌套的地狱模式。

我写了similar answer，基本上涵盖了您当前的所有需求：

如何通过react-adopt消耗映射器fn的先前结果
通过react-adopt从组合组件中组合多个查询/突变

这是您正在寻找的detailed answer，希望对解决您的问题有帮助：）

Answer 6

最佳解决方案

仅嵌套graphql函数

from array import * size = int(input()) arr = (array('i' , list(map(int, input().split())))) negarr = array('i') posarr = array('i') for i in arr: if i>=0: posarr.append(i) else: negarr.append(i) print(*(negarr+posarr))

您可以参考

Apollo concepts

Apollo 2.1中的多个查询/变异

6 个答案:

最佳解决方案

仅嵌套graphql函数