Saltearse al contenido

Fetching de datos

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

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).

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.

src/components/User.astro
---
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 en la compilación pueden ser usados en el HTML -->
<h1>Usuario</h1>
<h2>{randomUser.name.first} {randomUser.name.last}</h2>
<!-- Los datos obtenidos en la compilación pueden ser pasados como props a otros componentes -->
<Contact client:load email={randomUser.email} />
<Location city={randomUser.location.city} />

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

src/components/Movies.tsx
import type { FunctionalComponent } from 'preact';
const data = await fetch('https://example.com/movies.json').then((response) =>
response.json()
);
// Los componentes que se procesan en la compilación se registran en la CLI.
// Cuando se renderizan con una directiva client:*, se registran en la consola del navegador.
console.log(data);
const Movies: FunctionalComponent = () => {
// Envía el resultado a la página.
return <div>{JSON.stringify(data)}</div>;
};
export default Movies;

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

src/components/Film.astro
---
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>

Fetching de datos desde un Headless CMS

Sección titulada Fetching de datos desde un Headless CMS

Los componentes de Astro pueden obtener datos desde tu CMS favorito y luego renderizarlos como contenido en tu página. Usando rutas dinámicas, los componentes pueden generar páginas basadas en el contenido obtenido del CMS.

Ve nuestras guías de CMS para obtener más detalles sobre cómo integrar Astro con un headless CMS incluyendo Stroyblok, Contentful y WordPress.