GraphQL Query/Mutation with Higher-Order Components in React
Let's learn GraphQL mutations using Higher-Order Components with Apollo Client in React!
We'll cover the following
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:
Get hands-on with 1200+ tech skills courses.