コンテンツにスキップ

XataとAstro

Xataは、リレーショナルデータベース、検索エンジン、分析エンジンの機能を組み合わせたサーバーレスデータプラットフォームで、一貫したREST APIを公開します。

  • Xataのアカウントとデータベースの作成(Web UIからサンプルデータベースを使用できます)
  • アクセストークン(XATA_TOKEN_API
  • データベースのURL

Xata CLIを更新して初期化した後、.envファイルにAPIトークンがあり、データベースのURLが定義されていることを確認します。

上記確認後、以下のようなファイルがあるはずです。:

.env
XATA_API_KEY=hash_key
# gitブランチと同じ名前の
# Xataブランチがない場合に
# 使用されるXataブランチ
XATA_FALLBACK_BRANCH=main

databaseURLが定義されていることを確認します。:

.xatarc
{
"databaseUrl": "https://your-database-url"
}

環境変数にインテリセンスと型安全性を持たせるには、src/ディレクトリのenv.d.tsファイルを編集、または作成します。:

src/env.d.ts
interface ImportMetaEnv {
readonly XATA_API_KEY: string;
readonly XATA_FALLBACK_BRANCH?: string;
}
interface ImportMeta {
readonly env: ImportMetaEnv;
}

Xata CLIのcodegenerationを使用し、TypeScriptオプションを選択すると、データベーススキーマに合わせた型を持つSDKのインスタンスが生成されます。また、@xata.io/clientpackage.jsonに追加されます。

Xataの環境変数とデータベースURLは、SDKインスタンスによって自動的に取得されるため、これ以上のセットアップ作業は必要ありません。

ここまでで、プロジェクトの構造は以下のようになります。:

  • ディレクトリsrc/
    • xata.codegen.ts
    • env.d.ts
  • .env
  • astro.config.mjs
  • package.json
  • .xatarc

ブログ記事(Posts)をクエリするには、.astroファイルでgetXataClient()をインポートして使用します。以下の例では、Xataのサンプルブログデータベースから最初の50件の記事をクエリしています。

src/pages/blog/index.astro
---
import { getXataClient } from "../xata.codegen";
const xata = getXataClient();
const { records } = await xata.db.Posts.getPaginated({
pagination: {
size: 50
}
})
---
<ul>
{records.map((post) => (
<li>{post.title}</li>
))}
</ul>

スキーマが変更されるたびにSDKを再生成する必要があります。Xata CLIが作成する生成ファイルを変更しないでください。スキーマが更新されると、変更内容が上書きされるためです。

その他のバックエンドサービスガイド

貢献する

どんなことを?

GitHub Issueを作成

チームに素早く問題を報告できます。

コミュニティ