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

Question

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

我正在使用react-apollo从react组件与graph ql服务器进行交互。

如果我使用这个。道具。mutate要调用单击时的突变事件，没有选项/参数指定要调用的突变。

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

如果我直接使用这个。道具。mutate（{变量：{…}}}） 它总是调用导入到文件中的第一个突变。

Answer 1

您可以使用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: ...})

Answer 2

灵感： 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

通过属性，您可以将突变/闭包作为命名（addComment，editcoment）属性传递。组合查询、多个突变、用一个组件进行重复（如果需要）。

更新：

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