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

Already subscribed? Sign In

Autoplay

    Update Application State with React Apollo ApolloConsumer Component

    Andrew Del PreteAndrew Del Prete

    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

    reactReact
    apolloApollo
    graphqlGraphQL
    javascriptJavaScript
    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 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.

    Discuss

    Discuss