Local First avec React Native et Expo - 3. Introduction aux modèles

Mise en ligne : mardi 8 octobre 2024

Introduction à la classe Model

1. Créer un modèle

Un modèle est une classe qui étend la classe Model et qui permet d'utiliser une table du schema dans notre application. Un modèle ne peut pas exister sans une table correspondante dans le schéma.

Créons un modèle Note, lié à une table notes.

La table notes :

src/database/model/schema.js
tableSchema({
	name: 'notes',
	  columns: [
				{ name: 'title', type: 'string' },
				{ name: 'content', type: 'string' },
				{ name: 'is_pinned', type: 'boolean' },
				{ name: 'created_at', type: 'number' },
				{ name: 'updated_at', type: 'number' },
			],				
}),

src/database/model/Note.js
import { Model } from '@nozbe/watermelondb'

export default class Note extends Model {
  static table = 'notes'
}

Pour pouvoir l'utiliser, nous devons l'ajouter dans le modelClasses de la database de notre fichier database.js :

src/database/database.js
import Post from 'model/Note'

export const database = new Database({
  modelClasses: [Note],
})

2. Les champs (propriétés) du modèle

Pour garantir que les champs aient le même type que ceux que nous avons définis dans le schéma, watermelon met à notre disposition des decorateurs.

Le décorateur @field peut être utilisé pour les trois types de données.

Toutefois, watermelon met à notre disposition des décorateurs plus spécifiques.

Par exemple :

• Si c'est du texte, nous utiliserons le décorateur @text, car c'est un @field qui enlève les espaces avant et après le texte.
• Pour une date, nous utiliserons le décorateur @date.

A la différence du schema où nous utilisions le snake_case, pour le modèle, nous utiliserons le camelCase.

Voici notre classe Note avec ses champs :

src/database/model/Note.js
import { Model } from '@nozbe/watermelondb';
import { date, field, text } from '@nozbe/watermelondb/decorators';

export default class Note extends Model {
	static table = 'notes';

	@text('title') title;
	@text('content') content;
	@field('is_pinned') isPinned;
	@date('created_at') createdAt;
	@date('updated_at') updatedAt;
}

3. Champs avancés

Vous pouvez aussi utilisé, dans certains cas, des champs avancés :

• @json pour sérialiser de la data.
• @readonly pour mettre des champs en lecture seule.
• @nochange si vous ne voulez pas qu'un champ puisse être modifié après sa création.

Le @readonly est utilisé pour le tracking automatique des dates (created_at et updated_at), car nous ne voulons pas modifier accidentellement leur contenu, mais nous voulons que watermelon les modifie lui-même, automatiquement (donc pas de @nochange).

Notre class Note après modification serait donc :

src/database/model/Note.js
import { Model } from '@nozbe/watermelondb';
import { date, field, readonly, text } from '@nozbe/watermelondb/decorators';

export default class Note extends Model {
	static table = 'notes';

	@text('title') title;
	@text('content') content;
	@field('is_pinned') isPinned;
	@readonly @date('created_at') createdAt;
	@readonly @date('updated_at') updatedAt;
}

Nous n'avons vu ici que les bases de la classe Model, mais cela sera suffisant pour commencer à manipuler des données.