データの取得

.astroファイルは、ページの生成に使用するためにリモートデータを取得できます。

Astroでの`fetch()`

すべてのAstroコンポーネントは、コンポーネントスクリプト内でグローバルなfetch()関数にアクセスでき、URL全体（例: https://example.com/api）を指定してAPIへのHTTPリクエストを送れます。さらに、new URL("/api", Astro.url) (EN)を使えば、サーバー上でオンデマンドにレンダリングされるプロジェクトのページやエンドポイントへのURLを構築できます。

このfetch呼び出しはビルド時に実行され、取得したデータは動的なHTMLを生成するためにコンポーネントテンプレートで利用できます。SSRモードが有効な場合、fetch呼び出しはランタイムに実行されます。

💡 Astroコンポーネントスクリプト内では、トップレベルawaitを活用しましょう。

💡 取得したデータは、propsとして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>

<!-- ビルド時に取得したデータをpropsとしてコンポーネントに渡せる -->
<Contact client:load email={randomUser.email} />
<Location city={randomUser.location.city} />

フレームワークコンポーネントでの`fetch()`

fetch()関数は、あらゆるフレームワークコンポーネントでもグローバルに利用できます。

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>

ヘッドレスCMSからの取得

Astroコンポーネントは、お好みのCMSからデータを取得し、それをページコンテンツとしてレンダリングできます。動的ルート (EN)を使えば、CMSのコンテンツをもとにページを生成することも可能です。

Storyblok、Contentful、WordPressなどのヘッドレスCMSとAstroを統合する方法の詳細については、CMSガイド (EN)を参照してください。

コミュニティリソース

Astro + GraphQLでフルスタックアプリを作成する

貢献するコミュニティスポンサー