Récupération de données

Les fichiers .astro peuvent récupérer des données distantes pour vous aider à générer de vos pages.

`fetch()` dans Astro

Tous les composants Astro ont accès à la fonction globale fetch() dans le script de leur composant pour effectuer des requêtes HTTP aux API en utilisant l’URL complète (par exemple https://example.com/api). En outre, vous pouvez construire une URL vers les pages et les points de terminaison de votre projet qui sont affichés à la demande sur le serveur en utilisant new URL("/api", Astro.url).

Cet appel de récupération sera exécuté au moment de la compilation et les données seront disponibles dans le modèle du composant pour générer du HTML dynamique. Si le mode SSR est activé, tous les appels de récupération seront exécutés au moment de l’exécution.

💡 Profitez de la fonctionnalité “top-level await (Anglais)” à l’intérieur de votre script de composant Astro.

💡 Transmettez les données récupérées aux composants Astro et aux composants de framework, en tant que props.

---
import Contact from "../components/Contact.jsx";
import Location from "../components/Location.astro";

const response = await fetch("https://randomuser.me/api/");
const data = await response.json();
const randomUser = data.results[0];
---
<!-- Les données récupérées lors de la compilation peuvent être rendues en HTML -->
<h1>Utilisateur</h1>
<h2>{randomUser.name.first} {randomUser.name.last}</h2>

<!-- Les données récupérées lors de la compilation peuvent être transmises aux composants en tant que props -->
<Contact client:load email={randomUser.email} />
<Location city={randomUser.location.city} />

`fetch()` dans les composants de framework

La fonction fetch() est également disponible globalement dans tous les composants de framework :

import type { FunctionalComponent } from 'preact';

const data = await fetch('https://example.com/movies.json').then((response) => response.json());

// Les composants dont le rendu est effectué au moment de la compilation écrivent également dans la console du serveur.
// Lorsqu'ils sont rendus avec une directive `client:*`, ils écrivent également dans la console du navigateur.
console.log(data);

const Movies: FunctionalComponent = () => {
  // Affiche le résultat sur la page
  return <div>{JSON.stringify(data)}</div>;
};

export default Movies;

Requêtes GraphQL

Astro peut aussi utiliser fetch() pour interroger un serveur GraphQL avec n’importe quelle requête GraphQL valide.

---
const response = await fetch(
  "https://swapi-graphql.netlify.app/.netlify/functions/index",
  {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      query: `
        query getFilm ($id:ID!) {
          film(id: $id) {
            title
            releaseDate
          }
        }
      `,
      variables: {
        id: "ZmlsbXM6MQ==",
      },
    }),
  }
);


const json = await response.json();
const { film } = json.data;
---
<h1>Recherche d'informations sur Star Wars : Un nouvel espoir</h1>
<h2>Titre : {film.title}</h2>
<p>Année : {film.releaseDate}</p>

Récupérer à partir d’un CMS headless

Les composants Astro peuvent récupérer des données de votre CMS préféré et les restituer sous forme de contenu de page. Grâce aux routes dynamiques, les composants peuvent même générer des pages basées sur le contenu de votre CMS.

Consultez nos guides CMS pour plus de détails sur l’intégration d’Astro avec des CMS headless comme Storyblok, Contentful et WordPress.

Ressources communautaires

Créer une application fullstack avec Astro + GraphQL (Anglais)

Contribuer Communauté Parrainer