Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Update Application State with React Apollo Mutation Component

    Andrew Del PreteAndrew Del Prete

    In this lesson I refactor a React component that utilizes a higher-order component for mutations to the new Mutation render prop component baked into react-apollo 2.1.

    Additional Resources:



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson


    Instructor: 00:00 In this example, I'm using React Apollo and GraphQL to update some state. I have an items component that implements the query render prop component to retrieve the array of items and render them. I also have an add item button component that expects an add item function as a prop and is invoked on submit.

    00:19 To pass the add item function as a prop to my button component, I'm utilizing a higher-order component called Add Item With Mutation, that implements the GraphQL mutation and passes it to my button. As of React Apollo 2.1, there is now a mutation component we can use in place of the higher-order component.

    00:38 Like the new query component I'm using for items, mutation implements the render prop pattern, and in my opinion, is a bit easier to understand and maintain. First, I'll comment out the rendered stuff, and add an item to use in a few seconds.

    00:51 The mutation component accepts a mutation prop for us to pass our query, along with any variables we might need to pass with it, which we don't need in this instance. The render prop within mutation provides our mutation function add item, along with the loading and error states, and any data returned.

    01:09 Next, I'll go ahead and move the content of Add Item into our render prop, and uncomment. Finally, to remove the higher-order component implementation and make sure we're using the refactored add item component in our app, and it looks like it works.

    01:23 I hope this gives a good understanding of some of the things the new mutation component can do, and how it can help clean things up.