Fetching de datos

Los archivos .astro pueden obtener datos remotos para ayudarte a generar tus páginas.

`fetch()` en Astro

Todos los componentes de Astro tienen acceso a la función global fetch() en su script de componente para hacer peticiones HTTP a APIs usando la URL completa (p.ej., https://example.com/api). Adicionalmente, puedes construir una URL a las páginas y endpoints de tu proyecto que se renderizan bajo demanda en el servidor utilizando new URL("/api", Astro.url) (EN).

Esta llamada a fetch será ejecutada en el momento de la compilación, y los datos estarán disponibles para la plantilla del componente para generar HTML dinámico. Si el modo SSR está habilitado, cualquier llamada a fetch será ejecutada en tiempo de ejecución.

💡 Aprovecha el top-level await dentro del script del componente de Astro.

💡 Puedes pasar los datos obtenidos a los componentes de Astro u otros UI frameworks, como 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];
---
<!-- Los datos obtenidos durante la compilación pueden renderizarse en HTML -->
<h1>User</h1>
<h2>{randomUser.name.first} {randomUser.name.last}</h2>

<!-- Los datos obtenidos durante la compilación pueden pasarse a los componentes como props -->
<Contact client:load email={randomUser.email} />
<Location city={randomUser.location.city} />

`fetch()` en componentes de framework

La función fetch()también está disponible globalmente para cualquier componente de framework (EN):

import type { FunctionalComponent } from 'preact';

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

// Los componentes que se renderizan en tiempo de compilación también imprimen en la CLI.
// Cuando se renderizan con una directiva `client:*`, también imprimen en la consola del navegador.
console.log(data);

const Movies: FunctionalComponent = () => {
  // Mostrar el resultado en la página
  return <div>{JSON.stringify(data)}</div>;
};

export default Movies;

Consultas en GraphQL

Astro también puede usar fetch() para consultar un servidor GraphQL con cualquier consulta GraphQL válida.

---
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>Obteniendo información sobre Star Wars: A New Hope</h1>
<h2>Título: {film.title}</h2>
<p>Año: {film.releaseDate}</p>