In our previous guide, we have learned how to prepare our Relay Environment. Now you’re ready to start developing your React Native app.

In this guide, you will learn how to make your first query on Back4App. We’re going to dive into the Relay Query Render, understanding its main principles and use it to consume your first data from Back4App.

Get an overview of Relay Query Renderer;

Make a query on Back4App GraphQL API from a React Native App using Relay;

As well as React builds a tree of components, Relay builds a tree of data components. This means that each component of the application will be the owner of their fragment data. The fragment will contain the data information necessary to render it on screen and Relay ensures that this data is available before rendering the component.

Handling this whole approach, the Query Renderer is a root component necessary to compose those fragments and prepare the query to be fetched from our back-end.

Understanding the use of Query Renderer makes it important to abstract your application in different ways. A good abstract of code could prevent hours of work, errors, debugging time, etc.

In the last tutorial, we have prepared the Relay Environment file, which specifies the Back4App connection info. Using this configuration, Relay will take care of the communication with Back4App APIs. You don’t need to worry about the connection. Just focus on building the data components.

Let’s create your first class and populate it with a few objects using the Back4App GraphQL Console. The Person class has 2 fields name which is a string and salary which is an integer. Go to the Dashboard->Core->GraphQL Console and use the code below:

You’ll see the result below:

Now let’s create some objects inside this Class. Go to the create object mutation guide and see how to handle this case. Make sure you are using the latest Parse Server Version in order to use the most recent GraphQL API notation available on Back4App.

Now, the Person class is created and has a name and salary field.

After creating a new class, Back4App automatically generates all the necessary resources to use the back-end safely.

One example is the list of objects. Back4App already created the connections necessary to query the list of Person: People.

To better understand, go to the playground, refresh and open the docs tab and look for People. Back4App generated the connection field. You can also query the class person as a list. Note that the Query.people field is a PersonConnection.

Relay will consume the connection field to render a list of the Person’s objects.

Person Field doc:

And People (Person) connection Field docs:

It is important to remember that if a new class goes into your application, it will be necessary to update the schema inside the root of the React Native application.

If necessary, go to Download Schema docs and repeat the steps to update the schema.

Before we continue the tutorial, let’s introduce you to the fragment container.

Let’s create a component that will be the Person info owner. This component will contain the person’s name and salary. Here you can ask any person field to build your component. Now, we’re going to proceed with these two fields.

Replace the line of export default by the code below:

The code above will create a fragment of a Person that asks only for id, name, and salary.

Finish updating the rest of the component with the following code:

The final result should look like this:

The next step is to create the Query Renderer for your objects list. The Query Renderer is a root component for retrieving the data components and preparing them to fetch data from the backend. You will learn how to retrieve data for a Person Class on Back4App.

Let’s start with a Query Renderer with their props empty: graphql, variables, and render. Step by step, you will implement each one incrementally.

First of all, your application needs to inform the query for Query Renderer. Here, our application will consume a list of People. On query props, paste the following code:

The graphql comes from react-relay and implements the query as a string.

Variables

When necessary, the query renderer will consume variables. A good example: when the application requests a query for a person by id. As this is not the case right now, let’s pass by null on the variables props.

Populating the Person Card

This query will return a list of people. The query renderer ensures that the data will be available to render. If it doesn’t, shoot an error. The props responsible for this is the render.

Populate the render props with the following code:

Replace the commented todo for a javascript map for rendering a person card for each result from the list.

As said, the query renderer takes responsibility for making the data available only when it is ready. Until then, a loading message will be displayed. If an error occurs, it will be displayed on the screen preventing an unexpected application crash.

By last, let improves the render of person replacing the .map by a new function. Put it before the Query Renderer:

And the final result should look like:

Now it is time to fetch the Person using the PersonRenderer. If everything is ok, your application now has two new components: PersonRenderer and PersonCard.

Before starting the application, the Relay needs the Relay Compiler to run and generate the component types. For this, run into your terminal:

On app.js add the followng code:

You need to get the following result:

In our Back4App React Native application, we import the PersonRenderer directly into the App.js. As the PersonRenderer is a root component and has its QueryRenderer, the Person must be displayed without any error:

One of the powers of the Relay Compiler is to generate the types from each data component. Let’s type the PersonRenderer and PersonCard to make the application more powerful.

Typing PersonRenderer

Type the renderPerson function arg people into PersonRenderer:

Import the PersonRendererQuery type from __generated__ folder created inside of the same folder of the PersonRenderer.

Typing PersonCard

Go ahead to PersonCard, create a new type object and name it PersonCardProps:

Import thePersonCard_persontype from__generated__folders:

Add the person inside the type PersonCardProps:

On props arguments from PersonCard, type the component with thePersonCardProps:

The final result of both components should look like:

The final result of QueryRenderer demonstrated how the application can be abstracted. The application can display the Person inside of the Query Renderer. As the PersonCard has more components, it doesn’t change the way the Query Renderer was built.

The PersonRenderer was built to show how a query can be done in easy steps, combined with the power of the Back4App server. In the next guide, you will learn how to retrieve a specific Person object and show their attributes.