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

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

fetch() в Astro

Заголовок раздела fetch() в Astro

Все Astro компоненты имеют доступ к глобальной fetch() функции в скрипте компонента для отправки HTTP запросов к APIs. Этот запрос будет выполнен во время сборки, и данные будут доступны шаблону компонента для генерации динамического HTML.

💡 Воспользуйтесь преимуществом await верхнего уровня внутри скрипта вашего Astro компонента.

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

src/components/User.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} />

Заметка

Помните, что, Astro компоненты получают данные когда они рендерятся.

Ваш задеплоенный Astro сайт выполнит запрос на получение данных один раз, во время сборки. Во время разработки, вы увидите запросы данных когда компонент обновляется. Если вам нужно обновлять данные несколько раз на стороне клиента, используйте компоненты фреймворка или клиентские скрипты в Astro компоненте.

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

Заголовок раздела fetch() в компонентах фреймворка

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

src/components/Movies.tsx

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 запросом.

src/components/Weather.astro

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

src/pages/index.astro

---
// Получите список ссылок на ваши Storyblok страницы с помощью @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>

Посмотрите полное руководство Добавление Headless CMS в Astro за 5 минут чтобы добавить Storyblok в ваш Astro проект!

Пример: WordPress + GraphQL

Заголовок раздела Пример: WordPress + GraphQL

src/pages/about.astro

---
// Получите контент с вашей страницы "О нас" с 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

src/pages/index.astro

---
// Получите пути вашего каталога с 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>