1 of 4

2. Backend API

2.1 Create Backend API

Before we start creating our app, we first need to create an API connected to a database. For this purpose, we will use a free tool called Supabase.

Go to supabase.com and Sign up to create a new account.

Step 2: Create a New Project

Next, we need to create a new project. Click the "New Project" button once you login into the Supabase app, and follow the wizard to create your API project.

3. Create Database Table

Now we need to create our database table to store our to-do tasks.

Start by clicking the Table Editor button on the left sidebar menu. Once you're on this page, press the "Create a new table" button.

When the form opens, add the following columns to match the screenshot below:

id (uuid)
title (varchar)
description (text)
completed (bool)
created_at (timestamptz)

Make sure "Enable Row Level Security" is NOT checked.

4. Build GraphQL Schema

Since we are going to be building our app on top of GraphQL query language, we need to tell Supabase to build its schema.

On the left sidebar menu click the "SQL Editor" button. Once on this screen, press the "+ New Query" button.

Now enter the following code snippet in the editor and press "RUN"

-- Rebuild the GraphQL Schema Cache
select graphql.rebuild_schema();

5. API Details

Go to Settings => API page. Here you can find the API URL and Key as shown in the screenshot below.

That's all. We're done with creating our API for the project. All we need to do is consume it now.

2.2 Setup Apollo Client

To consume our GraphQL API on the app, we will be using the popular Graphql Client. Luckily, we already have an Apollo plugin available for BlueBase that takes care of all the setup.

Step 1: Install the BlueBase Apollo plugin

Step 2: Use the plugin

Same as the last time, we import the apollo plugin:

Step 3: Create Apollo Configs

Create the following file in the root folder:

Replace [[API_URL]] and [[API_KEY]] with the values relevant to your project.

Step 4: Use the configs

Similar to how we use the plugins, we need to pass our configs object as a prop to the BlueBaseApp component.

Change the contents of the App.tsx to match below:

Step 5: Bypass Apollo Bug

This is it. Our App is configured to use the GraphQL API through the Apollo client.

2.3 Generate Typescript Interfaces

The last step is to generate typescript interfaces from our GraphQL schema. This step is used to enhance the developer experience to strongly type our API.

1. Add dependencies

Install the following dev dependencies:

2. Make your API accessible

Add the following script to the script section of your package.json file:

3. Create the codegen config file

Create a file codegen.yml in the root directory:

Replace [[API_URL]] and [[API_KEY]] with the values relevant to your project.

2.1 Create Backend API

Before we start creating our app, we first need to create an API connected to a database. For this purpose, we will use a free tool called Supabase.

Go to supabase.com and Sign up to create a new account.

Step 2: Create a New Project

Next, we need to create a new project. Click the "New Project" button once you login into the Supabase app, and follow the wizard to create your API project.

3. Create Database Table

Now we need to create our database table to store our to-do tasks.

Start by clicking the Table Editor button on the left sidebar menu. Once you're on this page, press the "Create a new table" button.

When the form opens, add the following columns to match the screenshot below:

id (uuid)
title (varchar)
description (text)
completed (bool)
created_at (timestamptz)

Make sure "Enable Row Level Security" is NOT checked.

4. Build GraphQL Schema

Since we are going to be building our app on top of GraphQL query language, we need to tell Supabase to build its schema.

On the left sidebar menu click the "SQL Editor" button. Once on this screen, press the "+ New Query" button.

Now enter the following code snippet in the editor and press "RUN"

-- Rebuild the GraphQL Schema Cache
select graphql.rebuild_schema();

5. API Details

Go to Settings => API page. Here you can find the API URL and Key as shown in the screenshot below.

That's all. We're done with creating our API for the project. All we need to do is consume it now.

2.2 Setup Apollo Client

To consume our GraphQL API on the app, we will be using the popular Graphql Client. Luckily, we already have an Apollo plugin available for BlueBase that takes care of all the setup.

Step 1: Install the BlueBase Apollo plugin

Step 2: Use the plugin

Same as the last time, we import the apollo plugin:

plugins.native.ts

import BlueBasePluginApollo from '@bluebase/plugin-apollo';
import BlueBasePluginJsonSchemaComponents from '@bluebase/plugin-json-schema-components';
import BlueBasePluginLauncher from '@bluebase/plugin-launcher';
import BlueBasePluginReactNativePaper from '@bluebase/plugin-react-native-paper';
import BlueBasePluginReactNavigation from '@bluebase/plugin-react-navigation';
import BlueBasePluginResponsiveGrid from '@bluebase/plugin-responsive-grid';
import BlueBasePluginSettingsApp from '@bluebase/plugin-settings-app';
import { MaterialCommunityIcons } from '@bluebase/plugin-vector-icons';

import Plugin from './src';

export const plugins = [
	BlueBasePluginApollo,
	BlueBasePluginJsonSchemaComponents,
	BlueBasePluginLauncher,
	BlueBasePluginReactNativePaper,
	BlueBasePluginReactNavigation,
	BlueBasePluginResponsiveGrid,
	MaterialCommunityIcons,

	Plugin,
	BlueBasePluginSettingsApp,
];

Step 3: Create Apollo Configs

Now we need to input our API URL as well as the API Token into the Apollo client. We do this by using .

Create the following file in the root folder:

configs.ts

export const configs = {

	// Apollo Graphql Configs
	'plugin.apollo.httpLinkOptions': {
		uri: [[API_URL]] + '/graphql/v1',
		headers: {
			apiKey: [[API_KEY]]
		}
	},

};

Replace [[API_URL]] and [[API_KEY]] with the values relevant to your project.

Step 4: Use the configs

Similar to how we use the plugins, we need to pass our configs object as a prop to the BlueBaseApp component.

Change the contents of the App.tsx to match below:

App.tsx

import 'react-native-gesture-handler';

import { BlueBaseApp } from '@bluebase/core';
import React from 'react';

import { configs } from './configs';
import { plugins } from './plugins';

export default function App() {
	return (
		<BlueBaseApp configs={configs} plugins={plugins} />
	);
}

Step 5: Bypass Apollo Bug

At the time of writing this tutorial, the latest version of Apollo Client (v3.5.4) has compatibility an with react-native. Add the following file in the root folder to bypass it.

metro.config.js

// Learn more https://docs.expo.io/guides/customizing-metro

const { getDefaultConfig } = require('@expo/metro-config');

const config = getDefaultConfig(__dirname);

// https://github.com/facebook/metro/issues/535
// https://github.com/apollographql/apollo-client/releases/tag/v3.5.4
config.resolver.sourceExts = process.env.RN_SRC_EXT
	? [...process.env.RN_SRC_EXT.split(',').concat(config.resolver.sourceExts), 'cjs'] // <-- cjs added here
	: [...config.resolver.sourceExts, 'cjs']; // <-- cjs added here

// https://docs.expo.dev/bare/installing-updates/
config.transformer.assetPlugins = [
	...config.transformer.assetPlugins,
	'expo-asset/tools/hashAssetFiles',
];
module.exports = config;