GraphQL is described as a query language for APIs. It is also considered as an alternative to REST and has been adapted more frequently in the last few years. Do you have a GraphQL endpoint already setup but you are looking forward to gaining some insight on how to gracefully consume this endpoint in a React Native app?
Together, let us build a demo app that leverages an integration between Apollo Client, React Native and Expo.
The main objectives of this tutorial going to cover are:
Learn how to integrate the Apollo Client in a React Native app
Fetch data from a REST Endpoint with Apollo using GraphQL query language
Show a loading indicator when results are being fetched
Display results from the remote API endpoint
Before we get started, make sure you have installed the following on your local development machine.
Access to API Key at NewsAPI.org (it's free)
Do note that, to follow along with this tutorial, you need some basic knowledge of React Native and Expo SDK. You are also required to have Expo Client installed either on a simulator device or a real device.
Throughout this tutorial, I am going to rely on and use the iOS simulator. The demo app we are constructing should work on Android devices as well.
Generating an Expo app#
Create a new React Native/Expo app using the following command. Make sure to navigate to the directory once the project has generated.
When generating an Expo app, you are prompted some questions by the cli interface as shown below. Make sure you choose
expo-template-blank. The rest of the questions can have default answers as suggested.
This tutorial assumes that you are using the latest Expo SDK version (
36.x.x and above ).
The next step is to install dependencies that we are going to use to build this app. You will learn about each individual dependency whenever necessary in the rest of the tutorial. Do note that, some of these dependencies are peer dependencies and you might not use them directly. Open a terminal window and install the following.
After the dependencies have installed, open
App.js file from the root of the project in your favorite code editor or IDE. Let us replace some of the default contents with some meaningful UI components such as custom header.
To make sure everything works, open the terminal window. Execute the command
expo start that triggers the Expo client app to run. Press
i if you are using an iOS simulator or
a if you are using an android emulator.
When the App component renders for the first time, you are going to get the following output:
How to consume a REST endpoint using Apollo Client#
With the base app running, you are ready to build further. Let us explore a way to configure the Apollo client in our app in this section. Create a new file called
Client.js inside a directory
src/graphql. The configuration part is going to fit inside this file. Import the following statements to begin the configuration process.
Three different packages are being imported in the above code snippet. The
apollo-cache-inmemory are used to integrate GraphQL client in a React or React Native app. Another package required to make it work is called
apollo-link. But in our app, we are going to use a variant called
Why the variant? The reason being is that this package allows the app to use third-party APIs that do not have a GraphQL endpoint. That means, they tend to have a REST endpoint. One real-time API is NewsAPI. This package is going to help us transmit the query to the REST endpoint in a GraphQL query.
Client.js file, start by adding a link from the constructor
RestLink and pass the API key as field inside
headers object. This object represents the value to be sent as headers on a request.
Lastly, add the below configuration with the default cache and
RestLink to complete the configuration of Apollo Client.
Fetching results from a Rest endpoint using Apollo#
Create a new file called
src/graphql directory. This file is going to contain the structure of the GraphQL query which is eventually going to fetch the result from the API.
Start by importing
Export a new query called
Headlines as shown in the snippet below. This query is going to fetch top articles with fields such as title, the published location, the URL of the article and so on. Using the
@rest directive, Apollo client knows how to parse the query.
Fetching results from the query#
To use the previously created query, import it as well as the configured Apollo client inside the
Using the query
Headlines the result should be fetched from the API whenever the component mounts as well as on the initial render of the app. This can be done by using the React Hook
Create a handler method
requestHeadlines to invoke the query using Apollo Client. Invoking the query is simply done adding a promise. I am going to
console.log the result from the query for now.
With the Expo client, there is an option to Debug JS remotely. It opens the console tab in browser’s developer tools and lets you see results of log statements (just like in web development).
Here is the result of the above query. When invoked, it fetches 20 headline objects in an array with all requested fields.
Add a loading indicator#
In the last image, in the response, you will find a field called
loading that indicates are the results being fetched or the response is complete. Using this can be helpful when adding an activity indicator to display the same message to the end-user in a real mobile app.
Start, by importing the
ActivityIndicator component from react-native. Also, to set a state for the loading indicator, import the hook
App component define the state for
Modify the return statement by adding an if-else statement based on the boolean value of the
After this step, you are going to get the following output:
To make it stop and behave in the way the app requires, update the state of
loading when the promise resolves inside the query handler method
Refresh the Expo client and you will notice that after a few seconds, when the data is fetched, the loading indicator disappears and the screen UI is displayed as before.
Display headlines from the API#
You are all set to display individual article component that is being fetched from the API endpoint. Add another state variable called
articles. To render a list of data, let’s use the FlatList component from react-native.
Update the articles state with the array from the response when the promise gets resolved inside the handler method
FlatList component requires three attributes to render a list of data items.
datais an array of data that is provided by the state variable
renderItemcontains the JSX for each item in the data array for which let’s create a new component called
Articlein a separate file in the next section.
keyExtractoris used to extract a unique key for a given item at the specified index for which let’s use each article’s URL for that is going to be unique.
Add an Article component#
src/components directory create a new file called
Article.js. This component is going to display the title and source of each headline.
Article component is going to be a presentation component that receives everything from the
App component as props. Add the following to the file.
Article component in
App.js file for it to work.
Go to the simulator or the device that is running the Expo client and you are going to see several headlines being fetched.
That's it! Congratulations to you for sticking around till the end. I hope this post serves as the basis of your adventure in building React Native apps with GraphQL and Apollo.