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

Posted 2023-03-10

【中文标题】如何从单个反应组件中调用多个 graphql 突变？

【英文标题】：How to call multiple graphql mutation from a single react component?

【发布时间】：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 组件吗？如果是这样，您可以包装多个具有不同突变的组件。

【参考方案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: ...)