GraphQL Query/Mutation with Higher-Order Components in React

We’ve done Query and Mutation components from React Apollo to connect a data-layer (Apollo Client) with a view-layer (React).

The Query component executes the query when it is rendered, whereas the Mutation component gives access to a function that triggers the mutation. Both components use the render props pattern to make the results accessible in their child functions.

Enter the Higher-Order Components

Higher-Order Components (HOC) is a widely accepted alternative to React’s render prop pattern. The React Apollo package implements a Higher-Order Component for queries and mutations as well, although the team behind Apollo does not advertise it, and even spoke in favor of render props as their first choice. Nonetheless, this lesson shows you the alternative, using a Higher-Order Component instead of a Render Prop, though our application will continue to use the render prop pattern afterward.

If you already have access to the query result in the Profile component’s arguments, there is no Query component needed in the component itself: