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）道具的突变/关闭。组成查询，许多变异，使用一个组件进行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: ...})

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

2 个答案: