Forem: Sachin Gaggar

React Native with WatermelonDB: A Lightweight and Reactive Database for Scalable Apps

Sachin Gaggar — Fri, 27 Sep 2024 05:46:29 +0000

When it comes to building scalable React Native applications, WatermelonDB is an excellent lightweight database solution. Adding only about 2MB to your app's size, it offers excellent performance, real-time reactivity, and allows you to manage complex relationships between data models efficiently. With WatermelonDB, you can easily handle operations like creating, reading, updating, and deleting records, and manage relationships using decorators like @children and @relation. It also provides you with sync functionality to remote databse.

In this blog, we'll cover how to set up WatermelonDB, define more complex models with relationships, and perform CRUD operations, including setting children and related records.

Setting Up WatermelonDB in React Native

1. Installation

Start by installing WatermelonDB in your React Native project:
npm install @nozbe/watermelondb npm install @nozbe/watermelondb/native --save npx pod-install

2. Define the Schema

Define the schema for your database. We’ll add some extra fields like age for users and content for posts, plus we’ll establish a relationship where users have multiple posts.

// schema.js
import { tableSchema } from '@nozbe/watermelondb/Schema';

export const mySchema = {
  version: 1,
  tables: [
    tableSchema({
      name: 'users',
      columns: [
        { name: 'name', type: 'string' },
        { name: 'email', type: 'string' },  // New field for email
        { name: 'age', type: 'number' },    // New field for age
      ],
    }),
    tableSchema({
      name: 'posts',
      columns: [
        { name: 'user_id', type: 'string', isIndexed: true },  // Foreign key to users
        { name: 'title', type: 'string' },
        { name: 'content', type: 'string' },  // New field for content
        { name: 'created_at', type: 'number' },  // New timestamp field
      ],
    }),
  ],
};

3. Define Models with Relationships

WatermelonDB uses decorators like @field, @children, and @relation to manage fields and relationships between models. Let’s define a User model that has many Post records, and a Post model that belongs to a User.

// User.js
import { Model } from '@nozbe/watermelondb';
import { text, field, date, children } from '@nozbe/watermelondb/decorators';

export default class User extends Model {
  static table = 'users';

  @text('name') name;
  @text('email') email;      // New field for email
  @field('age') age;          // New field for age

  @children('posts') posts;   // One-to-many relationship with posts
}

// Post.js
import { Model } from '@nozbe/watermelondb';
import { text, date, relation } from '@nozbe/watermelondb/decorators';

export default class Post extends Model {
  static table = 'posts';

  @text('title') title;
  @text('content') content;        // New field for content
  @date('created_at') createdAt;   // New timestamp field

  @relation('users', 'user_id') user;  // Relation to the users table
}

4. Set Up the Database

You now need to set up the database with the schema and models you defined:

// database.js
import { Database } from '@nozbe/watermelondb';
import SQLiteAdapter from '@nozbe/watermelondb/adapters/sqlite';
import { mySchema } from './schema';
import User from './User';
import Post from './Post';

const adapter = new SQLiteAdapter({
  schema: mySchema,
});

export const database = new Database({
  adapter,
  modelClasses: [User, Post],
  actionsEnabled: true,
});

CRUD Operations with WatermelonDB

Let’s walk through performing CRUD operations with WatermelonDB, including handling relations between users and posts.

1. Create a User and a Post

You can create new users and posts by using the create method inside a database.write block. Remember always write crud operation inside write block. Now here you have freedom either, we can create this method directly inside models or write a separate file.:

// Create a User
const addUser = async (name, email, age) => {
  await database.write(async () => {
    await database.collections.get('users').create(user => {
      user.name = name;
      user.email = email;  // Setting email field
      user.age = age;      // Setting age field
    });
  });
};

// Create a Post for a User
const addPost = async (user, title, content) => {
  await database.write(async () => {
    await database.collections.get('posts').create(post => {
  /**
  * Setting relation to User. This is very very important.
  * Without this set you can't take advantage of flexibilty provided by children decorator
  **/
      post.user.set(user);  
      post.title = title;
      post.content = content;  // Setting content field
      post.createdAt = Date.now();  // Setting timestamp
    });
  });
};

2. Read Records

Fetching records is straightforward, and you can query related data like posts belonging to a user.

// Fetch all users
const fetchUsers = async () => {
  const users = await database.collections.get('users').query().fetch();
  return users;
};

// Fetch posts for a specific user
const fetchUserPosts = async (user) => {
  const posts = await user.posts.fetch();  
// Using @children decorator all posts will be collected 
// related to this user
  return posts;
};

// Fetch the user who owns a post
const fetchPostOwner = async (post) => {
  const user = await post.user.fetch();  // Fetches the related user using @relation
  return user;
};

3. Update Records

Updating records is done by fetching a record and modifying it within a database.write block:

// Update a User
const updateUser = async (user, newName, newAge) => {
  await database.write(async () => {
    await user.update(u => {
      u.name = newName;
      u.age = newAge;
    });
  });
};

// Update a Post
const updatePost = async (post, newTitle, newContent) => {
  await database.write(async () => {
    await post.update(p => {
      p.title = newTitle;
      p.content = newContent;
    });
  });
};

4. Delete Records

WatermelonDB allows both soft delete (marks as deleted) and hard delete (permanently removes the record):

// Soft delete a User
const softDeleteUser = async (user) => {
  await database.write(async () => {
    await user.markAsDeleted();
  });
};

// Hard delete a User
const hardDeleteUser = async (user) => {
  await database.write(async () => {
    await user.destroyPermanently();
  });
};

Conclusion

WatermelonDB is a lightweight, high-performance solution for React Native apps, adding only 2MB to your app size while providing efficient data handling for large datasets. By leveraging decorators like @children and @relation, you can easily define and manage relationships between records. The asynchronous CRUD operations ensure smooth UI performance, making it an ideal database choice for both small and large-scale applications.

Whether you're handling complex relationships or just starting with simple data, WatermelonDB’s combination of reactivity, performance, and ease of use makes it a great option for React Native developers.

Feel free to drop a comment if you have any questions. Also, take a look at withObservables, a Higher-Order Component (HOC) that automatically re-renders your UI whenever there are changes in the database values.

GraphQl Integration With React Native

Sachin Gaggar — Sat, 21 Oct 2023 07:07:00 +0000

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.
Let's integrate this with React Native App.

Step 1: Basic Setup:

Create a react native project

npx react-native init GraphqlDemo

Install apollo client and graphQL

npm install @apollo/client graphql

Step 2: Apollo Client Integration:

In this step, we will initialize Apollo client with Graphql
API Endpoint. After that, we have to wrap our App with ApolloProvider.
ApolloProvider wraps the app and places Apollo Client on the context, enabling us to access it from anywhere in our component tree.

import React from 'react';
import {SafeAreaView, StyleSheet, useColorScheme} from 'react-native';

import {Colors} from 'react-native/Libraries/NewAppScreen';
import {ApolloClient, ApolloProvider, InMemoryCache} from '@apollo/client';
import HomePage from './src/screenModules/HomePage';

const client = new ApolloClient({
  // create an apollo link instance, a network interface for apollo client
  uri: 'https://swapi-graphql.netlify.app/.netlify/functions/index',
  // create an in memory cache instance for caching graphql data
  cache: new InMemoryCache(),
});

function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <ApolloProvider client={client}>
        <HomePage />
      </ApolloProvider>
    </SafeAreaView>
  );
}

export default App;

In the above code, we are using a demo API endpoint which gives us data about Star Wars movies.

Step 4: GraphQl Request Query:

Now lets create our query to fetch data from the endPoint.
You can also play around in the explorer by opening the same end point in your browser: https://studio.apollographql.com/public/star-wars-swapi/variant/current/explorer

The gql template literal tag can be used to concisely write a GraphQL query that is parsed into a standard GraphQL AST. It is the recommended method for passing queries to Apollo Client. While it is primarily built for Apollo Client, it generates a generic GraphQL AST which can be used by any GraphQL client.

import {gql} from '@apollo/client';

export const AllFilms = gql`
  query Query {
    allFilms {
      films {
        title
        director
        releaseDate
      }
    }
  }
`;

Step 5: HomePage.tsx:

Now Apollo Client prove us with hook useQuery. This hook gives us 3 states:
⇒loading: When data is being fetch this will be true
⇒error: When there is error in fetching data
⇒data: Requested data in the format specified in query

Now we can use this to create our homepage as such:

import React from 'react';
import {FlatList, StyleSheet, Text, View} from 'react-native';
import {useQuery} from '@apollo/client';
import {AllFilms} from '../../GraphQL/Query';

const HomePage = () => {
  const {data, loading} = useQuery(AllFilms);
  const header = () => {
    return (
      <View style={styles.headerView}>
        <Text style={styles.headerTitle}>Star Wars Films</Text>
      </View>
    );
  };
  const AllFilmsItem = ({item}) => {
    const {title, director, releaseDate} = item;
    return (
      <View style={styles.cards}>
        <View>
          <Text style={styles.title}>Title: {title}</Text>
        </View>
        <View>
          <Text style={styles.description}>Director: {director}</Text>
          <Text style={styles.description}>Release Date: {releaseDate}</Text>
        </View>
      </View>
    );
  };
  if (loading) {
    return <Text>Data loading</Text>;
  }
  return (
    <FlatList
      style={styles.container}
      data={data.allFilms.films}
      contentContainerStyle={styles.contentContainer}
      renderItem={({item}) => <AllFilmsItem item={item} />}
      keyExtractor={(_, index) => index.toString()}
      ListHeaderComponent={header}
    />
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
  },
  headerView: {
    padding: 16,
  },
  headerTitle: {
    fontSize: 18,
    color: 'black',
    fontWeight: '600',
    textAlign: 'center',
  },
  cards: {
    padding: 16,
    backgroundColor: 'white',
    elevation: 2,
    shadowColor: 'black',
    shadowOpacity: 0.2,
    shadowRadius: 2,
    marginBottom: 8,
    borderRadius: 8,
  },
  contentContainer: {
    padding: 16,
  },
  title: {
    fontSize: 16,
    color: 'black',
    fontWeight: '600',
  },
  description: {
    fontSize: 14,
    color: 'black',
    fontWeight: '600',
  },
});

export default HomePage;

Final Product will look like this:

In Loading state:

When Data is fetched: