Build a Scalable React Native App: PostgreSQL & GraphQL Tutorial

Building a Mobile App with React Native and GraphQL

Getting Started with React Native

In our previous article, we created a GraphQL server using NodeJS and Express. Now, we’ll explore how to consume these endpoints using a React Native mobile app. With React Native, we can develop applications that run seamlessly on both iOS and Android devices. To get started, we’ll use Expo to bootstrap our app, which allows us to quickly build and deploy our application. Expo also enables us to run our app on mobile devices or in a web browser.

Setting Up the Application

To create the application, run the command expo init and follow the prompts. This will generate a sample app that you can access via the Expo app on your smartphone without installing it. To do this, download the Expo app from the Apple App Store for iOS or Google Play Store for Android.

Configuring Apollo Client

Apollo Client is a complete state management library that takes care of requesting, caching, and managing data provided by a GraphQL server. We’ll set up the client at our application’s entry point, App.js. First, we need to install the necessary dependencies by running the command npm install apollo-client apollo-cache-inmemory apollo-link-http react-apollo.

Understanding the Dependencies

• apollo-client: Takes care of data exchange with the server, state management, and caching.
• apollo-cache-inmemory: Abstracts caching functionality to make use of caching capabilities without relying on Redux.
• apollo-link-http: Handles network requests, such as fetching and sending data.
• react-apollo: Supplies an ApolloProvider that wraps around the app, taking care of state management similar to React’s Context API.

Setting Up the Client

In App.js, import the dependencies and set up the client:
“`js
import { ApolloClient, InMemoryCache } from ‘@apollo/client’;
import { ApolloProvider } from ‘eact-apollo’;

const client = new ApolloClient({
cache: new InMemoryCache(),
link: new HttpLink({ uri: ‘https://your-graphql-endpoint.com/graphql’ }),
});

const App = () => {
return (

);
};
“`
Creating the Navigator

We’ll use react-navigation to handle routing in our app. First, install the necessary dependencies by running npm install react-navigation react-navigation-transitions. Then, create a navigation folder and add three files: AppNavigator.js, MainTabNavigator.js, and styles.js.

Creating Reusable Components

Our app will have several reusable components that make up its various screens. We’ll create these components before building the screens. Create a components folder and add folders for each component: Button, Card, TextInput, and KeyboardWrapper. Each component will have its own styled.js file for styling and an index.js file for the component logic.

Screens and GraphQL Integration

We’ll create two main screens: HomeScreen and AddNoteScreen. Each screen will use GraphQL queries and mutations to interact with our API.

HomeScreen

The HomeScreen will display all the notes we’ve created. We’ll use react-apollo‘s Query component to fetch notes from our GraphQL API.

AddNoteScreen

The AddNoteScreen will allow users to create new notes. We’ll use react-apollo‘s Mutation component to create a new note.

Conclusion

React Native and GraphQL work seamlessly together to create a great mobile application. With React Native, we can develop “write once, run everywhere” applications compatible with both Android and iOS. GraphQL allows our application to only fetch specific pieces of information, making it more efficient. Overall, these two technologies are great options to consider when building mobile apps.