Lire et écrire des données

Ce que tu vas apprendre

• Lire des lignes avec select, les filtrer et les trier.
• Ajouter, modifier et supprimer avec insert, update et delete.
• Lire le résultat { data, error } de chaque appel.

Le principe : une chaîne d'appels

Chaque requête du client suit le même schéma : on choisit la table avec from, l'opération, puis des filtres.

const { data, error } = await supabase
  .from('recettes')
  .select('id, titre, duree_minutes')

Le résultat est toujours un objet à deux champs. data contient les lignes en cas de succès. error contient le problème en cas d'échec, sinon null.

Le client renvoie l'erreur dans error : c'est à toi de la vérifier.

if (error) {
  console.error(error.message)
}

Lire avec select

Sans argument, select() renvoie toutes les colonnes. En listant des colonnes, tu ne demandes que ce qui sert :

const { data } = await supabase.from('recettes').select('titre')

Ces appels sont asynchrones, d'où le await. Ils font des allers-retours sur Internet, donc un résultat n'arrive jamais instantanément.

Filtrer, trier, limiter

Des méthodes se chaînent après select :

const { data } = await supabase
  .from('recettes')
  .select('id, titre')
  .eq('duree_minutes', 30)
  .order('created_at', { ascending: false })
  .limit(10)

Dans l'ordre : les recettes de 30 minutes, les plus récentes d'abord, dix au maximum.

D'autres filtres existent, comme gt (plus grand que) ou ilike (recherche de texte), décrits dans la référence.

Ajouter avec insert

const { error } = await supabase
  .from('recettes')
  .insert({ titre: 'Crêpes', duree_minutes: 20 })

Un objet ajoute une ligne, un tableau d'objets en ajoute plusieurs. Les colonnes id et created_at se remplissent toutes seules.

Par défaut, les lignes ajoutées ne sont pas renvoyées. Pour les récupérer, chaîne .select() :

const { data } = await supabase
  .from('recettes')
  .insert({ titre: 'Gratin dauphinois', duree_minutes: 90 })
  .select()

Modifier avec update

const { error } = await supabase
  .from('recettes')
  .update({ duree_minutes: 25 })
  .eq('id', 1)

Comme pour insert, ajoute .select() après le filtre pour recevoir les lignes modifiées.

Supprimer avec delete

const { error } = await supabase
  .from('recettes')
  .delete()
  .eq('id', 1)

Même précaution : sans filtre, la suppression concerne toutes les lignes que tu as le droit d'effacer. Une suppression ne se rattrape pas.

Un exemple complet dans une page

Un formulaire qui ajoute une recette puis recharge la liste :

<script setup lang="ts">
const supabase = useSupabaseClient()
const titre = ref('')

const { data: recettes, refresh } = await useAsyncData('recettes', async () => {
  const { data } = await supabase.from('recettes').select('id, titre')
  return data
})

async function ajouter() {
  const { error } = await supabase.from('recettes').insert({ titre: titre.value })
  if (!error) {
    titre.value = ''
    await refresh()
  }
}
</script>

refresh relance le chargement de useAsyncData. La liste se met à jour après chaque ajout réussi.

Quand rien ne se passe

Deux cas surprennent les débutants :

• select renvoie une liste vide sans erreur : la RLS filtre les lignes que tu n'as pas le droit de voir.
• insert, update ou delete est refusé : une politique RLS manque pour cette opération.

Dans les deux cas, la solution est dans les politiques de la table, pas dans ton code. Le cours 05 les détaille.

À retenir

• Chaque requête suit supabase.from('table'), une opération, puis des filtres.
• Le résultat est { data, error } : vérifie toujours error.
• select, insert, update, delete couvrent les quatre opérations de base.
• eq, order et limit se chaînent pour filtrer, trier et limiter.
• Ajoute .select() après insert ou update pour récupérer les lignes concernées.
• Un update ou delete sans filtre touche toutes les lignes autorisées.