CODEWITHSUNDEEP
reactjsgraphqlreact-apolloapollo-client
Marco Lackovic
Marco Lackovic

Reputation: 6487

How to pass variables to an Apollo Mutation component?

Since version 2.1 Apollo Client uses React's render props pattern.

On the official Apollo Client documentation variables are passed as parameter to the mutation function:

addTodo({ variables: { type: input.value } });

however various tutorials, including How to GraphQL, pass them as props:

<Mutation mutation={POST_MUTATION} variables={{ description, url }}>

What are there reasons for choosing one way or the other?

Upvotes: 2

Views: 2896

Answers (1)

Jonathan Irwin
Jonathan Irwin

Reputation: 5737

You can safely use either method of passing variables to the mutation.

Most of the time I would use the variables prop to set the variables since this is pretty clear and neat.

An instance where you might want to use the other method is when calling the mutation method from a child component - where the variables are also contained in that child component.

To follow on from the example code you gave above: Imagine an array of components on a ToDo list where each has an input but calls a single mutation (located in the parent component). It would be easier to call the mutation from inside each child components eg:

updateToDoItem({variables: {id: this.props.id, text: this.state.text}})

Upvotes: 1

Related Questions