Xata y Astro

Xata es una plataforma de datos serverless que combina las características de una base de datos relacional, un motor de búsqueda y un motor de análisis al exponer una única REST API consistente.

Añadiendo una base de datos con Xata

Requisitos previos

Una cuenta de Xata con una base de datos creada. (Puedes usar la base de datos de ejemplo de la interfaz de usuario web).
Un token de acceso (XATA_API_KEY).
La URL de tu base de datos.

Después de actualizar e inicializar el CLI de Xata, tendrás tu token de API en tu archivo .env y la URL de la base de datos definida.

Al final de la configuración, deberías tener:

XATA_API_KEY=hash_key

# Xata branch that will be used
# if there's not a xata branch with
# the same name as your git branch
XATA_BRANCH=main

Y la databaseURL definida:

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

Configuración del entorno

Para tener IntelliSense y seguridad de tipos en tus variables de entorno, edita o crea el archivo env.d.ts en tu directorio src/:

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

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

El uso de la generación de código del CLI de Xata y la elección de la opción TypeScript generó una instancia del SDK para ti, con tipos adaptados al esquema de tu base de datos. Además, se añadió @xata.io/client a tu package.json.

Tus variables de entorno de Xata y la URL de la base de datos se obtuvieron automáticamente por la instancia del SDK, por lo que no es necesario realizar más configuraciones.

Ahora, tu proyecto debería tener la siguiente estructura:

Directoriosrc/
- xata.ts
- env.d.ts
.env
astro.config.mjs
package.json
.xatarc

Crea tus consultas

Para consultar tus publicaciones, importa y utiliza la clase XataClient en un archivo .astro. El siguiente ejemplo consulta las primeras 50 publicaciones de la base de datos de blog de ejemplo de Xata.

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

Es importante tener en cuenta que el SDK debe regenerarse cada vez que cambie tu esquema. Por lo tanto, evita realizar cambios en los archivos generados que crea el CLI de Xata, ya que una vez que se actualice el esquema, tus cambios se sobrescribirán.