We will now take a look at the second approach, which is also the approach of the official Apollo documentation. Before getting started, undo the HoC implementation to send requests from the previous section. The new way of fetching data through the Apollo Client is via render props, or render functions. These were introduced to the Apollo Client in March 2018, and they replaced the good old HoC process.

Now, follow these instructions to get the Query component running:

1. Remove the demo posts from the top of the Feed.js file.
2. Remove the posts from the state and stop extracting them from the component state in the render method, too.
3. Import the Query component from the react-apollo package and graphl-tag, as follows:

import gql from 'graphql-tag';
import { Query } from 'react-apollo';

const GET_POSTS = gql`{ 
  posts { 
    id
    text
    user {
      avatar
      username
    }
  }
}`;

4. The Query component can now be rendered. The only parameter, for now, is the parsed query that we want to send. Replace the complete render method with the following code:

render() {
  const { postContent } = this.state;

  return (
    <div className="container">
      <div className="postForm">
        <form onSubmit={this.handleSubmit}> 
          <textarea value={postContent} onChange=
          {this.handlePostContentChange} placeholder="Write your 
           custom post!"/>
          <input type="submit" value="Submit" />
        </form>
      </div>
      <div className="feed">   
        <Query query={GET_POSTS}>
          {({ loading, error, data }) => {
            if (loading) return "Loading...";
            if (error) return error.message;

            const { posts } = data;
            return posts.map((post, i) => 
              <div key={post.id} className="post">
                <div className="header">
                  <img src={post.user.avatar} />
                  <h2>{post.user.username}</h2>
                </div>
                <p className="content">
                  {post.text}
                </p>
              </div>
            )
          }}
        </Query>
      </div>
    </div>
  )
}

In the preceding code, you can see why I prefer not to use this approach. The Query component requires a function as its child. This function receives three properties—loading, error, and data—much like with the HoC approach. Inside of this function, you can handle whatever you want to render. If the posts request is successful, we render the posts feed as before.

You may think that you could render a component directly, as a child instead of as a function, as with the higher-order component, but this is not possible. Apollo requires us to specify a function, not a React component, as a child.

In my opinion, this is a dirty way of rendering and requesting data. It moves away from the standard component workflow of React. The React community, however, prefers render props, which is why it was implemented in Apollo Client. To improve this, you can write separate components for each Query or Mutation component that you use. Then, you can hand over all of the properties given by our Apollo components to our custom ones. This way, the render function is more readable when using the Query component. You will see this solution soon.

We will continue to use the Query and Mutation components, as this is the default way of writing GraphQL requests in the latest versions of Apollo Client.

No matter which approach you take, the rendered output should look like that in Chapter 1, Preparing Your Development Environment. The form to create a new post is not working at the moment because of our changes; let's fix this in the next section.