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

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

fetch() в Astro

Раздел, озаглавленный fetch() в Astro

Все Astro компоненты (EN) имеют доступ к глобальной 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} />

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

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

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

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>