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

https://app.egghead.io/api/v1/lessons/react-update-application-state-with-react-apollo-mutation-component/subtitles

Update Application State with React Apollo Mutation Component

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.

Update Application State with React Apollo Mutation Component

Share this video with your friends