[英]How to call multiple graphql mutation from a single react component?
Currently, I have a react component which needs to call 2 mutations from the same component on different buttons clicks. 目前,我有一个react组件,需要在不同按钮单击时从同一组件调用2个突变。
I am using react-apollo
to interact with graphql server from react component. 我正在使用react-apollo
与来自react组件的graphql服务器进行交互。
If I use this.props.mutate
to call the mutation on click event, there is no option/argument to specify which mutation I want to call. 如果我使用this.props.mutate
在点击事件中调用突变,则没有选项/参数指定我要调用的突变。
https://www.apollographql.com/docs/react/essentials/mutations.html https://www.apollographql.com/docs/react/essentials/mutations.html
If I directly use this.props.mutate({variables: {...}})
it always calls the first mutation imported to the file. 如果我直接使用this.props.mutate({variables: {...}})
它将始终调用导入到文件中的第一个突变。
Inspiration: 灵感: 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/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 https://github.com/sysgears/apollo-universal-starter-kit/blob/master/modules/post/client-react/containers/PostComments.web.jsx
By props
property you can pass mutation/closure as named ( addComment
, editComment
) prop. 通过props
属性,您可以传递命名为( addComment
, editComment
)prop的变异/关闭。 Compose query, many mutations, redux (if needed) with one component. 组成查询,许多突变,使用一个组件进行redux(如果需要)。
UPDATE: 更新:
Other solution from the same project: https://github.com/sysgears/apollo-universal-starter-kit/blob/master/modules/user/client-react/containers/UserOperations.js 来自同一项目的其他解决方案: https : //github.com/sysgears/apollo-universal-starter-kit/blob/master/modules/user/client-react/containers/UserOperations.js
You can use "compose" function from react-apollo library to make multiple mutations available to be called inside your component. 您可以使用react-apollo库中的“ compose”功能使多个变异可在组件内部调用。
import { compose, graphql } from "react-apollo";
const XComponent = {
...
}
const XComponentWithMutations = compose(
graphql(mutation1, {
name : 'mutation1'
}),
graphql(mutation2, {
name: 'mutation2'
})
)(XComponent);
Then inside your XComponent you can call both 然后,您可以在XComponent内同时调用
props.mutation1({variables: ...})
or 要么
props.mutation2({variables: ...})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.