Managing data on Back4App using GraphQL is a powerful option for any type of application, speeding up queries and simplifying the most complex ones. Back4App uses common conventions for GraphQL configuration and provides great tools to help your environment setup for development.

In this guide, you will learn how to perform basic data operations through a CRUD example app, which will show you how to create, read, update and delete data from your Parse server database in React Native using GraphQL and Relay.

You will first create your component functions for each CRUD operation, using them later in a complete screen layout, resulting in a to-do list app.

To build a basic CRUD application in React Native using Parse, GraphQL, and Relay.

In this first step, we need to define the class that the application will be operating with. The Todo class needs only to have a title(string) field describing the task and a done(boolean) field indicating if the task is completed. You can use a generic mutation to create the class into your database if you don’t have it, following our guide in the GraphQL Cookbook. You can also create the class using Back4App’s dashboard, through the database browser itself or from the JS, or GraphQL consoles.

After creating this new class, remember to download the schema.json file from the dashboard and save it in your application inside the data directory. This is necessary for the Relay Compiler to automatically generate the types from queries, mutations, etc.

At this point, your Back4App dashboard will have automatically generate CRUD Mutations for the class object, to see them you can go to the GraphQL Console, open the docs tab, and search for Todo:

Let’s now create a component that will be responsible for making the list query in the Back4App server, establishing a connection for the Objects, and automatically rendering and updating the list contents as they change.

Create a new file named TodoListQueryRenderer.js in your src directory with the following code:

Let’s now create our list component, which will render the data retrieved from the QueryRenderer. The component will for now contain only a simple scroll view containing a map function rendering each node. Go ahead and create a new file in your src directory called TodoList.js and add the following code:

The Query Renderer in Step 2 expects a fragment of data named TodoList_query, so we added it to the list component as well at the end of the file. Remember that GraphQL fragments are structures responsible for calling the data the components need to render and specifying what needs to be returned.

The first step to manage your data in your Back4App GraphQL database is to have some on it. We need to create a function to call to create a new Todo in our list component using a mutation responsible for it.

Let’s begin with the mutation, so create a new file named CreateTodoMutation.js in the src/mutations directory containing the following code:

Relay Modern provides us a bunch of API endpoints to be used to update the data after mutation calls. In this function, we used some of its functions to get the new Todo created and update the already existing list on the frontend. With this approach, we avoid a new call to the backend saving time that would be spent on a new request, user internet, over fetching, and more.

Now add the following function to the TodoList component, which will call the CreateTodoMutation and will be referenced later by a button.

Updating an object is similar to creating it, with the addition that, when you are updating an object using Relay Modern, you just need to ask the fields that you want to update with the new state on the output of the mutation.

Create a new file named UpdateTodoMutation.js in the src/mutations directory containing the following code:

Just like in the previous step, add the following function to theTodoListcomponent, which will call theUpdateTodoMutationand will be referenced later by a button.

When you are deleting an object, with the Relay Store APIs you can update the list and removing the old object from the frontend. We will call an updater callback, similar to the update from createTodo, but we will pass the connection and the id of the to-do to remove it from the list. In this way, we keep the frontend faithfully updated to our server.

Create a new file named DeleteTodoMutation.js in the src/mutations directory containing the following code:

Just like in the previous step, add the following function to theTodoListcomponent, which will call theDeleteTodoMutationand will be referenced later by a button.

Let´s now complete our TodoList component code with the styled user interface elements, state variables, and calls to your CRUD functions.

Before running your project, don´t forget to run yarn relay and update the Relay __generated__ types:

If your component is properly set up, you should see something like this after building and running the app:

Go ahead and add some to-dos by typing its titles in the input box one at a time and pressing the Add button. Note that after every successful creation, the createTodo function triggers the updater callback into the Mutation, refreshing your task list automatically. You should now have a sizeable to-do list like this:

You can now mark your tasks as done by clicking in the checkmark beside it, causing their done value to be updated to true and changing its icon status on the left. As said in the update function step, the Relay will update automatically the todo with the new value of the field done.

The only remaining data operation is now the delete one, which can be done by pressing on the trash can icon at the far right of your to-do list object. After successfully deleting an object, you should get an alert message like this:

At the end of this guide, you learned how to perform basic data operations (CRUD) with GrapqhQL and Relay Modern on React Native, while also learning the Relay Connection APIs that help us updating our frontend.