React Apollo - multiple mutations

Question

I'm using react-apollo@2.5.6

I have a component, when you click on it, it will based on "select" state and issue either an add or a remove operation.

Currently I'm doing this to have 2 mutations function injected to my component. Is that the correct way to do it? Am I able to just use one Mutation ( HOC ) instead of multiple ?

    <Mutation mutation={ADD_STUFF}>
      {(addStuff) => (
        <Mutation mutation={REMOVE_STUFF}>
          {(removeStuff) => {

And later in the wrapped component, I will do something like that

                        onClick={(e) => {
                          e.preventDefault()

                          const input = {
                            variables: {
                              userId: user.id,
                              stuffId: stuff.id,
                            },
                          }

                          // Based on selected state, I will call either add or remove
                          if (isSelected) {
                            removeStuff(input)
                          } else {
                            addStuff(input)
                          }
                        }}

Thanks

Answer 1

Everything is possible but usually costs time and money ;) ... in this case simplicity, readability, manageablility.

1st solution

Common mutation, fe named 'change' with changeType parameter.

Of course that requires API change - you need a new resolver.

2nd solution

Using graphql-tag you can construct any query from the string. Take an inspiration from this answer - with 'classic graphql HOC' pattern.

This solution doesn't require API change.

Answer 2

I think using two different Mutation components does not make sense. If I understand correctly, there can be two ways to solve your problem.

1. Using Apollo client client.mutate function to do manual mutation based on the state and set mutation and variables properties based on the new state. To access the client in current component, you need to pass along the client from parent component where it was created to child components where mutation is taking place.
2. Using single Mutation component inside render method of your component and setting mutation and variables attributes based on the state variable.

Answer 3

The approach that you are using is working as you said, but to me looks like you are delegating some logic to the UI that should be handled by the underlying service based on the isSelected input.

I think that you should create a single mutation for ADD_STUFF and REMOVE_STUFF, I would create the ADD_OR_REMOVE_STUFF mutation, and choose the add or remove behavior on the resolver.

Having one mutation is easier to maintain/expand/understand, if the logic requires something else besides add/remove, for example if you have to choose add/remove/update/verify/transform, would you nest 5 mutations?

In the previous case the single mutation could be named MULTI_HANDLE_STUFF, and only have that one mutation called from the UI.