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.
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:
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.