How to call multiple graphql mutation from a single react component?

Question

Currently, I have a react component which needs to call 2 mutations from the same component on different buttons clicks.

I am using react-apollo to interact with graphql server from react component.

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.

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.

Answer 1

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/modules/post/client-react/containers/PostComments.web.jsx

By props property you can pass mutation/closure as named (addComment, editComment) prop. Compose query, many mutations, redux (if needed) with one component.

UPDATE:

Other solution from the same project: https://github.com/sysgears/apollo-universal-starter-kit/blob/master/modules/user/client-react/containers/UserOperations.js