Récupérer des données

Ce que tu vas apprendre

• Charger la liste des recettes avec useFetch.
• Afficher un état de chargement et une erreur.
• Ce qui se passe entre le navigateur et le serveur, étape par étape.
• Pourquoi $fetch seul dans le setup est un piège, et où l'utiliser.

Charger la liste avec useFetch

Ta page /recettes doit afficher les recettes fournies par l'API /api/recettes (tu l'écriras au chapitre suivant). Une ligne suffit :

<script setup lang="ts">
const { data: recettes, status, error, refresh } = await useFetch('/api/recettes')
</script>

<template>
  <p v-if="status === 'pending'">Chargement...</p>
  <p v-else-if="error">Impossible de charger les recettes.</p>
  <ul v-else>
    <li v-for="r in recettes" :key="r.id">
      <NuxtLink :to="`/recettes/${r.id}`">{{ r.titre }}</NuxtLink>
    </li>
  </ul>
  <button @click="refresh()">Actualiser</button>
</template>

useFetch renvoie plusieurs choses utiles :

Ce qui se passe vraiment

Au premier chargement, la page est fabriquée sur le serveur. useFetch y appelle l'API, puis le serveur envoie au navigateur le HTML et les données. Lance l'animation pour suivre la requête :

Quand tu cliques ensuite sur un <NuxtLink>, tout se passe dans le navigateur : seules les données voyagent.

Une adresse qui change

Sur la page d'une recette, l'adresse de l'API dépend du paramètre id. Passe une fonction plutôt qu'un texte : useFetch relance la requête quand la valeur change.

<script setup lang="ts">
const route = useRoute()
const { data: recette } = await useFetch(() => `/api/recettes/${route.params.id}`)
</script>

Tu peux aussi envoyer des paramètres d'adresse avec l'option query : useFetch('/api/recettes', { query: { categorie: 'dessert' } }) appelle /api/recettes?categorie=dessert.

useAsyncData : pour tout le reste

useFetch sert à appeler une adresse. Pour une autre source (une bibliothèque comme le client Supabase, un calcul), utilise useAsyncData. Il fonctionne de la même façon : données transmises du serveur au navigateur, status, error, refresh.

const { data: recettes } = await useAsyncData('recettes', () => client.from('recettes').select())

Le premier argument est une clé qui identifie la donnée. En réalité, useFetch est un raccourci pour useAsyncData + $fetch.

Le piège de $fetch

$fetch envoie une requête, tout simplement. Mais placé seul dans le <script setup> d'une page, il s'exécute deux fois : une fois sur le serveur, une fois dans le navigateur, car il ne transmet pas son résultat.

$fetch reste le bon outil pour les actions déclenchées par l'utilisateur, comme l'envoi d'un formulaire :

async function ajouterRecette(nouvelle: { titre: string, duree: number }) {
  await $fetch('/api/recettes', { method: 'POST', body: nouvelle })
  await refresh() // recharge la liste
}

À retenir

• useFetch charge une adresse, useAsyncData n'importe quelle fonction : les deux transmettent les données du serveur au navigateur.
• status et error gèrent l'attente et les erreurs ; refresh() relance.
• Passe une fonction en adresse pour qu'elle suive les changements de paramètre.
• $fetch pour les clics et les formulaires, jamais seul dans le setup.