Получение данных
.astro
файлы могут выполнять запросы на получение данных во время сборки чтобы помочь с генерацией ваших страниц.
fetch()
в Astro
Раздел, озаглавленный fetch() в AstroВсе Astro компоненты (EN) имеют доступ к глобальной fetch()
функции в скрипте компонента для отправки HTTP запросов к APIs. Этот запрос будет выполнен во время сборки, и данные будут доступны шаблону компонента для генерации динамического HTML.
💡 Воспользуйтесь преимуществом await верхнего уровня внутри скрипта вашего Astro компонента.
💡 Передавайте полученные данные в 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];---<!-- Данные полученные во время сборки будут доступны в HTML --><h1>User</h1><h2>{randomUser.name.first} {randomUser.name.last}</h2>
<!-- Данные полученные во время сборки могут быть переданы в компоненты как пропсы --><Contact client:load email={randomUser.email} /><Location city={randomUser.location.city} />
fetch()
в компонентах фреймворка
Раздел, озаглавленный fetch() в компонентах фреймворкаФункция fetch()
доступна глобально в любом компоненте фреймворка (EN):
import type { FunctionalComponent } from 'preact';import { h } from 'preact';
const data = await fetch('https://example.com/movies.json').then((response) => response.json());
// Компоненты, которые рендерятся во время сборки выведут данные в CLI.// В случае рендера с директивой client:*, они также выведут данные в консоль браузера.console.log(data);
const Movies: FunctionalComponent = () => {// Вывод результата на страницу return <div>{JSON.stringify(data)}</div>;};
export default Movies;
GraphQL запросы
Раздел, озаглавленный GraphQL запросыAstro также может использовать fetch()
для запроса к GraphQL серверу с любым действительным GraphQL запросом.
---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>
Запросы к Headless CMS
Раздел, озаглавленный Запросы к Headless CMSЗапрашивайте контент с вашей любимой CMS как Storyblok или WordPress!
Astro компоненты могут получать данные с вашей CMS и затем рендерить контент на странице. Используя динамические роуты, компоненты даже могут генерировать страницы основываясь на контенте с вашей CMS.
Ниже примеры, как такое получение данных выглядит в Astro, с ссылками на полные инструкции.
Пример: Storyblok API
Раздел, озаглавленный Пример: Storyblok API---// Получите список ссылок на ваши Storyblok страницы с помощью @storyblok/jsimport 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>
Посмотрите полное руководство Добавление Headless CMS в Astro за 5 минут чтобы добавить Storyblok в ваш Astro проект!
Пример: WordPress + GraphQL
Раздел, озаглавленный Пример: WordPress + GraphQL---// Получите контент с вашей страницы "О нас" с 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>
Посмотрите полное руководство Создание Astro веб-сайта с WordPress как Headless CMS чтобы добавить WordPress в ваш Astro проект!
Пример: Crystallize
Раздел, озаглавленный Пример: Crystallize---// Получите пути вашего каталога с 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>