Build a Scalable React Native App with PostgreSQL and GraphQL

Building a Mobile App with React Native and GraphQL

Getting Started with Our Server Setup

When it comes to developing mobile applications for both iOS and Android smartphones, React Native is an excellent choice. With React Native, you can write an application that works on both platforms, with the only difference coming at the view level, where iOS and Android render differently. In this two-part series, we’ll explore how to develop an application with React Native and GraphQL. We’ll build a simple note-taking app that allows users to add notes, view, edit, and delete them.

Prerequisites

To build our application, you’ll need to be familiar with NodeJS, Express, databases, and mobile development. You’ll also need to know how to set up an Apollo server with Express.

Setting Up Our Project Structure

Our project structure will be as follows:

• Folder Structure: You can find our project structure in this repo.

Installing Dependencies

To start, we’ll need to initiate our app and install our first set of dependencies:

• Apollo Server: Apollo Server is the best way to quickly build a production-ready, self-documenting API for GraphQL clients, using data from any source.

Creating Our Server

Add the following code to src/index.js:

• Initializing Express and Apollo Server: We’ve initialized an Express application and an Apollo server instance.
• Applying Middleware: We’ve applied cors to our Express application, allowing external domains to access our application.

Defining Our Schema and Resolvers

Next, we’ll define our schema and resolvers for the Apollo Server instance.

• Schema: The GraphQL schema provided to the Apollo Server contains all the available data for reading and writing data via GraphQL.
• Resolvers: Resolvers are responsible for manipulating and returning data.

Defining Our Schema

Let’s take a look at our schema definition:

• Notes: We’ve defined notes as an array of Note objects.
• Note Object: Each Note object contains an id field defined as ID, a unique identifier.
• Text Field: The Note object also has a text field defined as String.

Defining Our Resolvers

Our resolvers allow us to query either individual notes using the note field and providing an id argument or an array of notes using the notes field.

Queries and Mutations

Queries and mutations in GraphQL allow us to access and manipulate data on a GraphQL server. Queries are in charge of read operations, whereas mutations are in charge of create, update, and delete operations.

Defining Our Queries and Mutations

Let’s edit src/schema/notes.js to define our queries and mutations:

• Mutation Type: We’ve defined the Mutation type, which allows us to create, update, and delete notes.
• CreateNewNote: We’ve defined the createNewNote mutation, which takes a text argument and generates a unique id.
• UpdateNote: We’ve defined the updateNote mutation, which takes id and text arguments and updates the note accordingly.
• DeleteNote: We’ve defined the deleteNote mutation, which takes an id argument and deletes the note.

Testing Our Queries

Let’s test our queries using the GraphQL playground:

• Get All Notes: Fetches and returns all notes saved.
• Get Note by ID: Returns a piece of data matching the given id argument.

Adding PostgreSQL with Sequelize

Next, we’ll explore how to save our data to a database using PostgreSQL and Sequelize.

• Installing PostgreSQL and Sequelize: We’ll install PostgreSQL and Sequelize to connect to our database.
• Defining Our Model: We’ll define our model to prepare to link to the database.
• Connecting to Our Database: We’ll connect to our database from within our application.

Replacing Dummy Data with Database Data

Finally, we’ll replace our dummy data with database data using Sequelize.

• Updating Our Resolvers: We’ll update our resolvers to integrate the Sequelize API.
• Using Sequelize Methods: We’ll use Sequelize methods such as findAll() and findByPk() to interact with our database.

Stay tuned for part two of this tutorial, where we’ll build our front-end app using React Native and Apollo!