Получение данных

Файлы .astro могут получать удалённые данные, которые помогут вам генерировать страницы.

`fetch()` в Astro

Все компоненты Astro имеют доступ к глобальной функции fetch() в скрипте компонента, чтобы выполнять HTTP-запросы к API по полному URL (например, https://example.com/api). Кроме того, с помощью new URL("/api", Astro.url) (EN) можно построить URL к страницам и эндпойнтам вашего проекта, которые рендерятся на сервере по запросу.

Такой вызов fetch будет выполнен во время сборки, и данные будут доступны шаблону компонента для генерации динамического HTML. Если включён режим SSR, все вызовы fetch будут выполняться во время работы сервера.

💡 Используйте 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>Пользователь</h1>
<h2>{randomUser.name.first} {randomUser.name.last}</h2>

<!-- Данные, полученные при сборке, можно передать компонентам как пропсы -->
<Contact client:load email={randomUser.email} />
<Location city={randomUser.location.city} />

`fetch()` в компонентах фреймворков

Функция fetch() также глобально доступна в любых компонентах фреймворков (EN):

import type { FunctionalComponent } 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-запросы

Astro также может использовать fetch() для обращения к GraphQL-серверу с любым корректным GraphQL-запросом.

---
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>Получаем информацию о фильме «Звёздные войны: Новая надежда»</h1>
<h2>Название: {film.title}</h2>
<p>Год: {film.releaseDate}</p>