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

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

`fetch()` в Astro

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

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

💡 Используйте top-level await прямо внутри скрипта компонента Astro.

💡 Передавайте полученные данные в компоненты фреймворков в качестве пропсов.

---
import Contact from "../components/Contact.jsx";

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} />

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

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

import type { FunctionalComponent } from 'preact';

const data = await fetch('https://example.com/movies.json').then((res) => res.json());

const Movies: FunctionalComponent = () => {
  return <div>{JSON.stringify(data)}</div>;
};

export default Movies;

GraphQL-запросы

Astro может использовать fetch() для выполнения любых валидных 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>Информация о фильме: {film.title}</h1>
<p>Дата выхода: {film.releaseDate}</p>