This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    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: https://dev-blog.apollodata.com/introducing-react-apollo-2-1-c837cc23d926

    Code

    Code

    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
    Transcript

    Transcript

    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.

    Discuss

    Discuss