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

Answer 2

You can use "compose" function from react-apollo library to make multiple mutations available to be called inside your component.

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

props.mutation1({variables: ...})

or

props.mutation2({variables: ...})