Data Fetching
.astro
files can fetch remote data at build time to help generate your pages.
fetch()
in Astro
Section titled fetch() in AstroAll Astro components have access to the global fetch()
function in their component script to make HTTP requests to APIs. This fetch call will be executed at build time, and the data will be available to the component template for generating dynamic HTML.
💡 Take advantage of top-level await inside of your Astro component script.
💡 Pass fetched data to both Astro and framework components, as 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];
---
<!-- 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 ComponentsThe fetch()
function is also globally available to any framework components:
import type { FunctionalComponent } from 'preact';
import { h } 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;
GraphQL queries
Section titled GraphQL queriesAstro can also use fetch()
to query a GraphQL server with any valid GraphQL query.
---
const response = await fetch("https://graphql-weather-api.herokuapp.com",
{
method: 'POST',
headers: {'Content-Type':'application/json'},
body: JSON.stringify({
query: `
query getWeather($name:String!) {
getCityByName(name: $name){
name
country
weather {
summary {
description
}
}
}
}
`,
variables: {
name: "Toronto",
},
}),
});
const json = await response.json();
const weather = json.data;
---
<h1>Fetching Weather at build time</h1>
<h2>{weather.getCityByName.name}, {weather.getCityByName.country}</h2>
<p>Weather: {weather.getCityByName.weather.summary.description}</p>
Fetch from a Headless CMS
Section titled Fetch from a Headless CMSFetch remote content from your favorite CMS like Storyblok or WordPress!
Astro components can fetch data from your CMS and then render it as your page content. Using dynamic routes, components can even generate pages based on your CMS content.
Here are some examples of what this data fetching looks like in Astro, with links to full tutorials below.
Example: Storyblok API
Section titled Example: Storyblok API---
// Fetch a list of your Storyblok page links using @storyblok/js
import BaseLayout from '../layouts/BaseLayout.astro';
import { storyblokInit, apiPlugin } from "@storyblok/js";
const { storyblokApi } = storyblokInit({
accessToken: "MY_STORYBLOK_ACCESS_TOKEN",
use: [apiPlugin],
});
const { data } = await storyblokApi.get('cdn/links');
const links = Object.values(data.links);
---
<BaseLayout>
<h1>Astro + Storyblok</h1>
<ul>
{links.map(link => (
<li><a href={link.slug}>{link.name}</a></li>
))}
</ul>
</BaseLayout>
See the full tutorial Add a Headless CMS to Astro in 5 Minutes to add Storyblok to your Astro project!
Example: WordPress + GraphQL
Section titled Example: WordPress + GraphQL---
// Fetch your about page content from the WordPress API
import BaseLayout from '../../layouts/BaseLayout.astro';
const slug = 'about';
const response = await fetch(import.meta.env.WORDPRESS_API_URL, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: `
{
page(id:"${slug}", idType:URI) {
title
content
}
}
`
});
const data = await response.json();
---
<BaseLayout>
<h1>{data.title}</h1>
<article set:html={data.content} />
</BaseLayout>
See the full tutorial Building an Astro Website with WordPress as a Headless CMS to add WordPress to your Astro Project!
Example: Crystallize
Section titled Example: Crystallize---
// Fetch your catalogue paths from Crystallize GraphQL API
import BaseLayout from '../../layouts/BaseLayout.astro';
import { createClient } from '@crystallize/js-api-client';
const apiClient = createClient({
tenantIdentifier: 'furniture'
});
const query = `
query getCataloguePaths{
catalogue(language: "en", path: "/shop") {
name
children {
name
path
}
}
}
`
const { data: { catalogue } } = await apiClient.catalogueApi(query)
---
<BaseLayout>
<h1>{catalogue.name}</h1>
<nav>
<ul>
{catalogue.children.map(child => (
<li><a href={child.path}>{child.name}</a></li>
))}
</ul>
</nav>
</BaseLayout>