Hands-On Full-Stack Web Development with GraphQL and React

Apollo Consumer

Nearly all of the code that we have written can stay as it was in the previous section. We just need to remove the UserProvider from the App class, because it is not needed anymore for the Apollo Consumer.

Open up the user.js in the context folder and replace the contents with the following code:

import React, { Component } from 'react';import { ApolloConsumer } from 'react-apollo';export class UserConsumer extends Component {  render() {    const { children } = this.props;    return (      <ApolloConsumer>        {client => {          // Use client.readQuery to get the current logged in user.          const user = {            username: "Test User",            avatar: "/uploads/avatar1.png"          };          return React.Children.map(children, function(child){ return React.cloneElement(child, ...