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

【问题标题】：How to call multiple graphql mutation from a single react component?如何从单个反应组件中调用多个 graphql 突变？
【发布时间】：2019-01-24 03:04:18
【问题描述】：

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

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

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

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

如果我直接使用this.props.mutate({variables: {...}})，它总是调用导入文件的第一个突变。

【问题讨论】：

您在使用Mutation 组件吗？如果是这样，您可以包装多个具有不同突变的组件。

标签： javascript reactjs graphql react-apollo apollo-client

【解决方案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

【讨论】：

此链接现已损坏
已更新，添加了附加选项

【解决方案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: ...})

【讨论】：