Supabase › Gérer ses Bases de Données PostgreSQL

Pour gérer sa base de données Supabase, il est essentiel de comprendre comment structurer sa base de données en tables et comment manipuler des données.

Pour faciliter ces opérations, Supabase propose à travers son backoffice en ligne un éditeur graphique (GUI) ainsi qu’un éditeur SQL intégré pour une liberté totale.

Un solution de type BaaS comme Supabase étant conçue pour simplifier le développement de backend d’applications web en no/low-code, nous allons nous concentrer sur l’usage de l’interface graphique.

Structurer sa base de données (créer des tables)

Pour créer des tables dans Supabase, vous devrez d’abord vous rendre dans l’onglet Table Editor du menu principal de la sidebar.

1. Choisir un schéma

Avant de créer une table, il est demandé de choisir un schéma dans lequel la table sera créée.

Supabase vous placera alors par défaut dans un schéma nommé public.

Un schéma est une sorte de conteneur pour vos tables. Chaque schéma peut contenir plusieurs tables, et vous pouvez créer des schémas supplémentaires si nécessaire.

Chaque schéma peut être utilisé pour organiser vos données de manière logique, par exemple en séparant les données utilisateur des données de configuration.

Chaque schéma peut également avoir ses propres permissions et règles de sécurité. Supabase contient de base de nombreux schémas prédéfinis, tels que :

• public : le schéma par défaut pour les tables propres à votre application. auth : gère tout ce qui touche à l’authentification (utilisateurs, sessions).
• storage : stocke les métadonnées liées aux fichiers uploadés dans les buckets.
• extensions : regroupe les extensions PostgreSQL activées (par ex. pgcrypto, postgis, etc.).
• realtime : gère les fonctionnalités de diffusion en temps réel (écoute de changements).
• Etc.

Vous pouvez alors créer une nouvelle table dans le schéma public en cliquant sur le bouton New table.

2. Informations générales

Il sera alors demandé de renseigner un nom et une description (optionnelle) pour cette table.

Supabase restreint l’accès aux tables au travers de Row Level Security. Nous aborderons cette notion dans un chapitre ultérieur - veillez simplement à laisser cochée la case Enable RLS afin de pouvoir sécuriser par la suite l’accès à vos tables.

Enfin, si vous le souhaitez, vous pouvez cocher la case Enable Realtime pour activer la synchronisation en temps réel de cette table avec votre application.

3. Définir les colonnes

Pour chaque colonne, vous devrez au moins indiquer son nom et son type.

Concernant le typage des colonnes, Supabase propose un certain nombre de types de données, dont certains sont spécifiques à PostgreSQL.

Par exemple, vous pouvez choisir entre des types :

• Numériques (integer, float, decimal)
• Textuels (text, varchar, uuid, json)
• Date/heure (date, time, timestamp)
• Booléen (boolean)
• Etc.

Au delà, Supabase propose de définir des options comme :

• Primary key : clé primaire
• Unique : unique
• Not null : non nul
• Default Value : valeur par défaut
• Is Identity : auto-incrément
• Define as Array : tableau
• Etc.

Pour créer une clé étrangère, il suffit de créer une colonne (généralement de type int ou un uuid) puis de cliquer sur le bouton Add foreign key relation et de sélectionner :

1. La table référencée par la relation
2. La colonne de la table qui servira de clé étrangère (celle que vous venez de créer)
3. La clé primaire de la table référencée

Enfin, vous avez la possibilité de définir des actions à effectuer en cas de modification ou de suppression d’une ligne de la table. Par exemple, vous pouvez choisir :

• Cascade : propager la modification ou la suppression à toutes les tables qui en dépendent
• Restrict : empêcher la modification ou la suppression si d’autres tables en dépendent
• Set default : réaffecter une valeur par défaut
• Set null : affecter la valeur null

Une fois séléctionnée, Supabase décrit par une phrase claire ce que représente chaque action,afin que ce comportement soit facilement compris.

Manipuler les données

Les données sont au coeur de toute application. Il est donc essentiel de savoir comment les insérer, les modifier, les supprimer et les lire dans votre base de données.

Supabase permet de les manipuler via son backoffice en ligne (éditeur graphique (GUI) et éditeur SQL intégré), mais également via une API RESTful ou GraphQL pour interagir avec vos données de manière programmatique.

Via le backoffice

Via son interface, Supabase simplifie la manipulation des données en proposant des formulaires et boutons de saisie, modification, suppression et consultation de données.

Insérer des données

Pour insérer des données, 2 options s’offrent à vous :

1. Insertion unitaire par formulaire via le bouton Insert > Insert Row dans l’onglet Table Editor
2. Insertion CSV en masse via le bouton Insert > Import data from CSV dans l’onglet Table Editor

Modifier des données

Pour modifier des données, vous pouvez séléctionner la ligne en question puis cliquer sur le bouton Edit Row.

Supprimer des données

Pour supprimer des données, vous pouvez séléctionner la/les ligne(s) en question puis cliquer sur le bouton Delete X Row en haut de la table ou bien directement faire un clic droit sur la ligne en question puis Delete Row.

Lire des données

Pour lire des données, il suffit de cliquer sur la table en question dans l’onglet Table Editor.

Vous pouvez alors visualiser les données de la table sous forme de tableau, avec la possibilité de :

1. Filtrer les données en fonction de critères (bouton Filter en haut de la table)
2. Trier les données en fonction de colonnes (bouton Sort en haut de la table)
3. Paginer les données en fonction de la quantité à afficher

Via une API RESTful

La puissance de Supabase réside également dans sa capacité à générer automatiquement une API RESTful pour chaque table créée. Cette API vous permet d’interagir avec vos données de manière programmatique, en utilisant des requêtes HTTP.

Pour chaque table, Supabase génère des endpoints pour les opérations CRUD (Create, Read, Update, Delete) :

• POST {supabase_url}/rest/v1/{table} : pour insérer des données
• GET {supabase_url}/rest/v1/{table} : pour lire des données
• PUT {supabase_url}/rest/v1/{table} : pour modifier des données
• DELETE {supabase_url}/rest/v1/{table} : pour supprimer des données

La documentation auto-générée par Supabase pour chacune de vos tables est accessible dans l’onglet API Docs de la sidebar, dans la rubrique Tables and Views. Vous y trouverez les détails des endpoints, les paramètres acceptés, les types de données, etc.

Prenons un exemple concret avec une table nommée tasks, stockant en base de données des tâches à réaliser.

Voici la structure de la table tasks :

Voici comment interagir avec cette table via l’API RESTful de Supabase 👇

Via cURL (Bash)

Insérer des données

Pour insérer une nouvelle tâche, vous pouvez envoyer une requête POST au endpoint /rest/v1/tasks avec le corps de la requête contenant les données de la tâche à insérer.

curl -X POST 'https://********.supabase.co/rest/v1/tasks' \
-H "apikey: votre_cle_publique" \
-H "Authorization: Bearer votre_cle_publique" \
-H "Content-Type: application/json" \
-H "Prefer: return=minimal" \
-d '{ "title": "Envoyer mes factures", "completed": false }'

Modifier des données

Pour modifier une tâche existante, vous pouvez envoyer une requête PATCH au endpoint /rest/v1/tasks en spécifiant quelle tâche modifier (en utilisant par exemple son id avec id=eq.2) dans l’URL et en incluant les données mises à jour dans le corps de la requête.

curl -X PATCH 'https://********.supabase.co/rest/v1/tasks?id=eq.2' \
-H "apikey: votre_cle_publique" \
-H "Authorization: Bearer votre_cle_publique" \
-H "Content-Type: application/json" \
-H "Prefer: return=minimal" \
-d '{ "completed": true }'

Supprimer des données

Pour supprimer une tâche, vous pouvez envoyer une requête DELETE au endpoint /rest/v1/tasks en spécifiant quelle tâche supprimer (en utilisant par exemple son id avec id=eq.2) dans l’URL.

curl -X DELETE 'https://********.supabase.co/rest/v1/tasks?id=eq.2' \
-H "apikey: votre_cle_publique" \
-H "Authorization: Bearer votre_cle_publique" \

Lire des données

Pour lire les tâches, vous pouvez envoyer une requête GET au endpoint /rest/v1/tasks en spécifiant les colonnes à récupérer dans l’URL.

curl -X GET 'https://********.supabase.co/rest/v1/<votre_table>?select=*' \
-H "apikey: votre_cle_publique" \
-H "Authorization: Bearer votre_cle_publique" \
-H "Content-Type: application/json" \

Vous pouvez également ajouter des paramètres de requête pour filtrer, trier ou paginer les résultats.

curl -X GET 'https://********.supabase.co/rest/v1/<votre_table>?select=title&title=like.nettoyer&completed=eq.false&order=title.asc' \
-H "apikey: votre_cle_publique" \
-H "Authorization: Bearer votre_cle_publique" \
-H "Content-Type: application/json" \
-H "Range: 0-9"

• select=title : sélectionne uniquement la colonne title
• title=like.nettoyer : filtre les résultats pour ne garder que ceux dont la colonne title contient le mot nettoyer
• completed=eq.false : filtre les résultats pour ne garder que ceux dont la colonne completed est égale à false
• order=title.asc : trie les résultats par ordre croissant de la colonne title
• Range: 0-9 : limite les résultats à 10 enregistrements (de 0 à 9)

Via le SDK JavaScript

cURL c’est sympa, mais si vous souhaitez interagir avec Supabase depuis votre application, il est préférable d’utiliser un SDK adapté. Il est temps de traduire les exemples cURL précedent avec notre client JavaScript !

Insérer des données

const SUPABASE_URL = "https://********.supabase.co"
const SUPABASE_KEY = "votre_cle_publique"
const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);

const { data, error } = await supabase
	.from('tasks')
	.insert([
		{ title: 'Faire les courses', completed: false }
	])
	.select();

Modifier des données

const { data, error } = await supabase
	.from('tasks')
	.update({ completed: true })
	.eq('id', 2)
	.select();

Supprimer des données

const { data, error } = await supabase
	.from('tasks')
	.delete()
	.eq('id', 2);

Lire des données

const { data, error } = await supabase
	.from('tasks')
	.select('title')
	.eq('completed', false)
	.order('title', { ascending: true })
	.range(0, 9);

Via une API GraphQL

Bien que nous n’aborderons pas en détail l’utilisation de GraphQL dans cette formation, il est important de noter que Supabase propose également une API GraphQL pour interagir avec vos données de manière flexible et puissante, en utilisant des requêtes et des mutations GraphQL.