如何从单个反应组件调用多个graphql突变？

Question

目前，我有一个react组件，需要在不同按钮单击时从同一组件调用2个突变。

我正在使用react-apollo与来自react组件的graphql服务器进行交互。

如果我使用this.props.mutate在点击事件中调用突变，则没有选项/参数指定我要调用的突变。

https://www.apollographql.com/docs/react/essentials/mutations.html

如果我直接使用this.props.mutate({variables: {...}})它将始终调用导入到文件中的第一个突变。

Answer 1

灵感： https://github.com/sysgears/apollo-universal-starter-kit/blob/master/packages/client/src/modules/post/containers/PostComments.jsx https://github.com/sysgears/apollo-universal-starter-kit/blob/master/modules/post/client-react/containers/PostComments.web.jsx

通过props属性，您可以传递命名为（ addComment ， editComment ）prop的变异/关闭。 组成查询，许多突变，使用一个组件进行redux（如果需要）。

更新：

来自同一项目的其他解决方案： https : //github.com/sysgears/apollo-universal-starter-kit/blob/master/modules/user/client-react/containers/UserOperations.js

Answer 2

您可以使用react-apollo库中的“ compose”功能使多个变异可在组件内部调用。

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

const XComponent = {
...
}

const XComponentWithMutations =  compose(
    graphql(mutation1, {
    name : 'mutation1'
  }),
    graphql(mutation2, {
    name: 'mutation2'
  })
)(XComponent);

然后，您可以在XComponent内同时调用

props.mutation1({variables: ...})

要么

props.mutation2({variables: ...})