Base de données
Crée tes tables, définis tes colonnes et génère des types TypeScript automatiquement.
4.1Créer une table
Tu peux créer des tables de deux façons : via le dashboard (visuel) ou en SQL.
Créer une table en SQL (Table Editor → SQL Editor)bash
CREATE TABLE public.articles (
id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
title TEXT NOT NULL,
content TEXT,
author_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
published BOOLEAN DEFAULT false,
created_at TIMESTAMPTZ DEFAULT now()
);4.2Les types de colonnes courants
| Type SQL | Usage | Type TypeScript |
|---|---|---|
| UUID | Identifiant unique | string |
| TEXT | Texte libre | string |
| INTEGER / BIGINT | Nombres entiers | number |
| BOOLEAN | Vrai/faux | boolean |
| TIMESTAMPTZ | Date + heure + timezone | string (ISO) |
| JSONB | Objet JSON indexable | Record<string, any> |
| TEXT[] | Tableau de textes | string[] |
4.3Relations entre tables
PostgreSQL est une base relationnelle. Tu relies tes tables avec des foreign keys :
Exemple : utilisateurs, articles et commentairesbash
-- Table articles (liée aux utilisateurs)
CREATE TABLE public.articles (
id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
title TEXT NOT NULL,
author_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
created_at TIMESTAMPTZ DEFAULT now()
);
-- Table commentaires (liée aux articles et aux utilisateurs)
CREATE TABLE public.comments (
id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
article_id UUID REFERENCES public.articles(id) ON DELETE CASCADE,
user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
content TEXT NOT NULL,
created_at TIMESTAMPTZ DEFAULT now()
);4.4CRUD avec le SDK
Create - Insérer des donnéestypescript
const { data, error } = await supabase
.from('articles')
.insert({
title: 'Mon premier article',
content: 'Hello world !',
author_id: user.id,
})
.select() // Retourne l'objet inséré
.single() // Un seul résultatRead - Lire des donnéestypescript
// Tous les articles publiés
const { data: articles } = await supabase
.from('articles')
.select('*')
.eq('published', true)
.order('created_at', { ascending: false })
// Un article par ID
const { data: article } = await supabase
.from('articles')
.select('*')
.eq('id', articleId)
.single()Update - Modifier des donnéestypescript
const { error } = await supabase
.from('articles')
.update({ title: 'Nouveau titre', published: true })
.eq('id', articleId)Delete - Supprimer des donnéestypescript
const { error } = await supabase
.from('articles')
.delete()
.eq('id', articleId)4.5Upsert : insérer ou mettre à jour
upsert est super pratique : il insère si la ligne n'existe pas, ou la met à jour si elle existe déjà.
Upsert - Insert or Updatetypescript
// Sauvegarder la progression d'un chapitre
// Si l'enregistrement existe : update. Sinon : insert.
const { error } = await supabase
.from('chapter_progress')
.upsert({
user_id: user.id,
course_slug: 'react',
chapter_slug: 'jsx-composants',
completed: true,
})4.6Générer les types TypeScript
Supabase peut générer automatiquement les types TypeScript depuis ton schéma :
Génération automatique des typesbash
# Installer le CLI Supabase
npm install -g supabase
# Générer les types depuis ton projet
supabase gen types typescript --project-id ton-project-id > lib/types/database.tsUtiliser les types généréstypescript
import type { Database } from '@/lib/types/database'
// Client typé
const supabase = createClient<Database>()
// Maintenant l'autocomplétion fonctionne :
const { data } = await supabase
.from('articles') // ← autocomplétion des noms de tables
.select('title, content') // ← autocomplétion des colonnes
// data est typé : { title: string, content: string | null }[]