Update Application State with React Apollo Mutation Component

Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 3 years ago

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

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.

~ 36 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today