How to have multiple onClick events on a button wrapped in a GraphQL mutation component in React

Question

I have the following mutation component in my React application:

   <Mutation
        mutation={REF_REQUEST_MUTATION}
        variables={{ fullname, email, relationship, position, message }}
      >
        {refRequestMutation => (
          <Button onClick={refRequestMutation}>Send</Button>
        )}
   </Mutation>

This mutation component is sitting in a modal and it is successful in sending the mutation. However I also need the onClick event to close the modal as well as send the mutation.

My method to close a modal looks like this:

  closeModal(modal) {
    this.setState({
      [modal]: false,
    });
  }

And this is the onClick event I add to a button to close a modal

<Button onClick={this.closeModal.bind(this, "modal3")}> Close </Button>

My main question is how do I add a second onClick event to a button that is wrapped in a mutation component. I've tried making an additional method that handles both and I've tried just adding another onClick event to the same button.

Neither has worked. I'm fairly new to using graphQL in my React applications so I'm unsure how to alter the syntax of the mutation.

Thanks in advance!

JoshuaCWebDeveloper JoshuaCWebDeveloper · Accepted Answer · 2019-02-03T19:19:43

Creating an additional method that handles both should work. The trick would be passing the refRequestMutation callback has an argument to the the event handler (I prefer creating and returning handlers from factory functions, but you can also use bind, as you're doing elsewhere):

    <Mutation
        mutation={REF_REQUEST_MUTATION}
        variables={{ fullname, email, relationship, position, message }}
      >
        {refRequestMutation => (
          <Button onClick={this.handleMutation.bind(this, "modal3", refRequestMutation)}>Send</Button>
        )}
    </Mutation>

    handleMutation (modal, mutationCallback, e) {
        this.closeModal(modal);
        mutationCallback(e);
    }

How to have multiple onClick events on a button wrapped in a GraphQL mutation component in React

1 Answers