XataとAstro

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

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

開発環境の準備

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

Xata CLIを更新・初期化すると、.env にAPIキーが追記され、データベースURLも設定されます。

設定ファイルは以下のようになります。

XATA_API_KEY=hash_key

# Gitブランチと同名のXataブランチが
# 存在しない場合に使用されるブランチ
XATA_BRANCH=main

databaseUrlは.xatarcファイルで定義します。

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

環境設定

環境変数に型安全性とIntelliSenseを持たせるため、src/env.d.tsを作成または編集します。

interface ImportMetaEnv {
  readonly XATA_API_KEY: string;
  readonly XATA_BRANCH?: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

:::tip環境変数 (EN)と.envファイルについてこちら (EN)を参照してください。:::

Xata CLIのコード生成でTypeScriptを選択すると、データベーススキーマに合わせた型付きSDK (@xata.io/client) が生成・インストールされます。

環境変数とデータベースURLはSDKが自動取得するため、追加設定は不要です。

ここまでのプロジェクト構成です。

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

クエリ作成

投稿（Posts）を取得する例です。.astroファイルにXataClientをインポートし、最初の50件を取得します。

---
import { XataClient } from '../../xata';
 
const xata = new XataClient({
  apiKey: import.meta.env.XATA_API_KEY,
  branch: import.meta.env.XATA_BRANCH
});

const { records } = await xata.db.Posts.getPaginated({
  pagination: {
    size: 50
  }
})
---

<ul>
  {records.map((post) => (
    <li>{post.title}</li>
  ))}
</ul>