In our previous guide, we’ve learned how to get the schema file, save it, and paste it on our React Native application. In this guide, we are going to install Relay and prepare our environment to start developing a React Native Application.

In order to set up Relay we will need first to install Relay on our React Native application and then prepare the Relay environment.

In the following steps you’ll find a basic Relay installation focused on a React Native Application. If you want to deep dive into this topic please visit the official documentation.

Let’s start installing the official library react-relay. This library is the Relay Core Team official API and has everything to build the data fragments.

The Relay Config has the info necessary for the Relay Compiler. Inside it, we will specify where Relay Compiler can find the schema.file, which folders should be looked up, and other configs. Let’s first install the relay-config package:

Now let’s create the Relay Config file where Relay will find the schema path.

Open the file and save it with the information below:

To convert the GraphQL artifacts at runtime, we need to install a babel plugin.

Now, inside your babel config file, you must add on plugins array the Relay Babel Plugin. The final babel.config.js will look like this:

In expo projects follow the same approach adding the plugins array inside of the babel.config.js right after the presets array. The final result should look:

Since our first documentation, we have been explaining about the Relay Compiler. For our application to compile our data fragments, we will install it now.

Let’s open our package.json and configure a new script command to run the relay compiler.

Watchman is responsible for configuring whether the Relay Compiler must be looking for any changes on relay fragments. If true it will rerun at each change. If false it will run after you run the yarn relay by itself.

The package.json file should look like this:

Finally, with installation steps done, we can run the yarn relay command on the root of the application:

Since we don’t build any data fragment, the Relay Compiler returns any file changed:

Nice, your application has the Relay already installed and configured. Now, let’s implement our Environment to start making requests to the Back4App server.

The Relay Environment defines how the Network Layer will handle the requests and how the Relay Store must work. The Store controls our data on the frontend by updating it only when changed and caching it. A simple Environment will need at least the Network Layer and the Store.

Network Layer

The Network Layer is easy to build. It will handle each request of our application, making queries, mutations, and subscriptions (if your application supports). Consuming it, the Relay will know-how to prepare the calls to access the application server.

Relay Store

The Store is responsible for update the data of our application on the client-side. Each request can have an updater function. Inside the updater function, you can use a list of helper functions to update your data with the Store Interface.

In order to prepare the Relay environment we need to create an environment config file. The file will be read by the Query Renderer every time a query is performed. Let’s prepare this file.

We will follow the principle of design from Relay Library, the collocation concept. To start, let’s create a folder on the root of the application and name it relay. Inside it, create a file and name it environment.js.

After that, import from relay-runtime all we need:

The network layer needs a function to fetch the data from the server. First of all, let’s create a fetch function responsible to perform a POST request:

On Network Layer it’s also where you configure your application-server connection. At Back4App we use two main keys: Application Id and Client Key. The keys must be informed on the headers as long as the server URL. To get this information go to your App, and click on API Console -> GraphQL menu.

With the GraphQL console open, you will see the URL on the top, and on the bottom the application keys necessary. Replace with your info the fetch function.

The relay-runtime provides the functions necessary to consume the Network Layer and creates the Store. Finally, let’s combine them into a new Environment and export to our application. Use the code below on your Environment file.

Environment final file will look like this:

Awesome. Now with the Relay and Relay environment installed and configured it’s time to start to consume the Back4App GraphQL API. So, the next step is to create our first Query Renderer and communicate it to our server.