Skip to content

Data Fetching

.astro files can fetch remote data to help you generate your pages.

All Astro components have access to the global fetch() function in their component script to make HTTP requests to APIs using the full URL (e.g. https://example.com/api or Astro.url + "/api").

This fetch call will be executed at build time, and the data will be available to the component template for generating dynamic HTML. If SSR mode is enabled, any fetch calls will be executed at runtime.

💡 Take advantage of top-level await inside of your Astro component script.

💡 Pass fetched data to both Astro and framework components, as 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];
---
<!-- Data fetched at build can be rendered in HTML -->
<h1>User</h1>
<h2>{randomUser.name.first} {randomUser.name.last}</h2>
<!-- Data fetched at build can be passed to components as props -->
<Contact client:load email={randomUser.email} />
<Location city={randomUser.location.city} />

fetch() in Framework Components

Section titled fetch() in Framework Components

The fetch() function is also globally available to any framework components:

src/components/Movies.tsx
import type { FunctionalComponent } from 'preact';
const data = await fetch('https://example.com/movies.json').then((response) =>
response.json()
);
// Components that are build-time rendered also log to the CLI.
// When rendered with a client:* directive, they also log to the browser console.
console.log(data);
const Movies: FunctionalComponent = () => {
// Output the result to the page
return <div>{JSON.stringify(data)}</div>;
};
export default Movies;

Astro can also use fetch() to query a GraphQL server with any valid GraphQL query.

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>Fetching information about Star Wars: A New Hope</h1>
<h2>Title: {film.title}</h2>
<p>Year: {film.releaseDate}</p>

Astro components can fetch data from your favorite CMS and then render it as your page content. Using dynamic routes, components can even generate pages based on your CMS content.

See our CMS Guides for full details on integrating Astro with headless CMSes including Storyblok, Contentful, and WordPress.

Contribute

What’s on your mind?

Create GitHub Issue

Quickest way to alert our team of a problem.

Community