Xata & Astro

Xata는 일관된 단일 REST API를 노출하여 관계형 데이터베이스, 검색 엔진 및 분석 엔진의 기능을 결합한 서버리스 데이터 플랫폼입니다.

Xata를 사용하여 데이터베이스 추가

전제조건

데이터베이스가 생성된 Xata 계정이 필요합니다. (웹 UI에서 샘플 데이터베이스를 사용할 수 있습니다.)
액세스 토큰 (XATA_API_KEY)이 필요합니다.
여러분의 데이터베이스 URL이 필요합니다.

Xata CLI를 업데이트하고 초기화하면 .env 파일에 API 토큰이 정의되고 데이터베이스 URL이 정의됩니다.

설정이 끝나면 다음이 필요합니다.

XATA_API_KEY=hash_key

# 사용될 Xata 브랜치
# xata 브랜치가 없는 경우
# git 브랜치와 동일한 이름
XATA_BRANCH=main

그리고 databaseURL은 다음과 같이 정의됩니다.

{
  "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;
}

Xata CLI의 코드 생성을 사용하고 TypeScript 옵션을 선택하면 데이터베이스 스키마에 맞는 타입으로 SDK 인스턴스가 생성됩니다. 또한 @xata.io/client가 package.json 파일에 추가됩니다.

Xata 환경 변수와 데이터베이스 URL은 SDK 인스턴스에서 자동으로 가져오므로 더 이상 설정 작업이 필요하지 않습니다.

이제 프로젝트의 구조는 다음과 같습니다.

디렉터리src/
- xata.ts
- env.d.ts
.env
astro.config.mjs
package.json
.xatarc

쿼리 생성

게시물을 쿼리하려면 .astro 파일에서 XataClient 클래스를 가져와 사용하세요. 아래 예시에서는 Xata의 샘플 블로그 데이터베이스에서 처음 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>