How to build React Native apps with GraphQL and Apollo

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.

Apollo has an entire ecosystem based on to build GraphQL applications. It could be used to develop client-side and server-side apps separately. Apollo has more features and support than its open-source competitors in GraphQL for JavaScript world for now.

Objectives

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

Requirements

Before we get started, make sure you have installed the following on your local development machine.

  • Nodejs <= 10.x.x

  • expo-cli

  • 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-client and 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 apollo-link-rest.

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.

In the 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.