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

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

`fetch()` в Astro

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

Этот запрос fetch будет выполнен во время сборки, и данные будут доступны шаблону компонента для генерации динамического HTML. Если включен режим SSR (EN), любые запросы 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>User</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>Fetching information about Star Wars: A New Hope</h1>
<h2>Title: {film.title}</h2>
<p>Year: {film.releaseDate}</p>