Apollo GraphQL and React Tutorial
Now you’re going to learn how to create your first GraphQL integration with React! For this tutorial, we’ll be using the public Star Wars API for GraphQL.
Setting up the project
Assuming you have already created a React project (for example, using create-react-app) what you have to do next is add the required libraries for the GraphQL integration. As we’ve seen in the previous article, the two most popular libraries for this are Relay from Facebook and Apollo GraphQL client from Meteor. In this tutorial, we’ll be using Apollo since it’s the friendliest of the two.
First, we need to install some packages:
Then, we need to create an Apollo GraphQL client to connect with a GraphQL server. In the past, creating a client was a bit difficult, but now we can use apollo-boost, a package that configures all the default settings for the client. The only thing we need to configure is the Server URL. In the future, if you need it, you can override the default setting for the ones you prefer.
Then, we use the Apollo Provider to inject the client into the React app.
After setting the client and using the ApolloProvider, we are ready to perform queries using an Apollo GraphQL component called “Query”. The Query component uses render props to create a request and return some important values, for instance, a Boolean indicating when the query is loading, an error field to show errors and data, and the result of the query, among others.
If you wish, you can also perform queries using the client directly. First, you’ll have to use the ApolloProvider component to inject the client object in the desired component.
You can see it in action here:
After learning how to request data, we can focus on how to modify it. Similarly to the Query component, Apollo GraphQL provides another component called “Mutation”.
Let’s imagine we want to add a new Star Wars film. In this case, we’ll use the Mutation component passing a GraphQL mutation as props. The render props give us the same information we had with the queries: error, loading and data.
As you can see, the GraphQL integration is really simple. The Query and Mutation components are the best example of how easy it is to perform queries and edits including loading state and error handling with a few lines of code. Apollo GraphQL has done great improvements to make the integrations really straightforward if we compare it with other libraries like redux-sagas.