In this lesson I refactor some code that utilizes the Mutation component to update client-side cache to use the new ApolloConsumer 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-apolloconsumer-component/subtitles

Update Application State with React Apollo ApolloConsumer Component

Instructor: [00:00] In this example, I'm using React Apollo to add items to an array that's stored in state. If I add banana, boom, it adds it to the array. I'm not communicating with an external server at all, but instead leveraging Apollo to store the items in local cache.

[00:17] I'm using the new query component to fetch and render the items array. I have an items component here that implements the query component, and I'm passing the getItems query to GraphQL, and I'm rendering each item in a div.

[00:32] Likewise, I'm using the new mutation component to invoke a mutation stored in my resolver. I have an addItem component that implement mutation, and when I look at the addItem query up here, I can see that it is a mutation that is directed towards the client cache.

[00:50] We're not hitting the server here, but we're talking to the client cache. For my example here, I'm not necessarily needing to talk to the server, but just fetch and manipulate some client cash. New to React Apollo 2.1, they've introduced the Apollo consumer component.

[01:06] In this case, we can use this instead of mutation, and actually get rid of our resolvers altogether. Like mutation, Apollo consumer implements the render prop pattern. It also provides the Apollo client instance directly via the renderProp function. We can write the cache directly from there.

[01:21] Now, I can move the mutation found in resolvers into my component instead. This cleans up the code quite a bit by allowing us to create these components to do these one-off mutations for us. Now, to try it out.

[01:35] Hey, it looks like it's working. Let's go ahead and clear out the old implementation of this. I no longer need my resolvers here. Get rid of that, save, and then get rid of this addItem GraphQL query. I think that's it.

[01:54] I hope you can see the power of the Apollo consumer component, and how it can really consolidate things down for you.

Update Application State with React Apollo ApolloConsumer Component

Share this video with your friends