How to pass variables to an Apollo Mutation component?

Question

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?

They're not mutually exclusive. Variables passed as props can be overridden when you call the mutate function that's handed to you in the render props, so you could view the second form as providing default values. In practice, I've never used the second form, I usually find myself wrapping the Mutation component around, say, a form, and calling the mutate function when the form is submitted. But there could be some use for passing the variables as props when those are known beforehand and user input is not required or already known, for example a logout mutation, or a "like" action. — Thomas Hennes
– Thomas Hennes, Commented Feb 7, 2019 at 17:20

Jonathan Irwin · Accepted Answer · 2019-02-10 07:48:18Z

1

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}})

answered Feb 10, 2019 at 7:48

Jonathan Irwin

5,8672 gold badges35 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to pass variables to an Apollo Mutation component?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related