XataとAstro

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

Xataを使ったデータベースの追加

開発環境の準備

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

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

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

XATA_API_KEY=hash_key

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

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

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

環境設定

環境変数にインテリセンスと型安全性を持たせるには、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/clientがpackage.jsonに追加されます。

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

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

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

クエリ作成

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

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