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

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

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.

.html

If I directly use this.props.mutate({variables: {...}}) it always calls the first mutation imported to the file.

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

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

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./docs/react/essentials/mutations.html

If I directly use this.props.mutate({variables: {...}}) it always calls the first mutation imported to the file.

• javascript
• reactjs
• graphql
• react-apollo
• apollo-client

• Are you using the Mutation ponent? If so, you can wrap more than one ponents with different mutations. – Ionut Achim Commented Aug 17, 2018 at 16:21

2 Answers 2

Inspiration: https://github./sysgears/apollo-universal-starter-kit/blob/master/packages/client/src/modules/post/containers/PostComments.jsx https://github./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 ponent.

UPDATE:

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

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

import { pose, graphql } from "react-apollo";

const XComponent = {
...
}

const XComponentWithMutations =  pose(
    graphql(mutation1, {
    name : 'mutation1'
  }),
    graphql(mutation2, {
    name: 'mutation2'
  })
)(XComponent);

Then inside your XComponent you can call both

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

or

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