Astro x Hygraph: Content Loader

Estamos emocionados de anunciar a Hygraph como socio de lanzamiento para Astro Content Layer, nuestro nuevo enfoque para traer contenido de CMS externo a las content collections. Hygraph es un CMS API-first que te permite organizar tu contenido complejo y estructurado y construir aplicaciones de alto rendimiento impulsadas por contenido con cualquier tecnología de frontend.

Las content collections te permiten combinar contenido de varios tipos en una sola API. Con Content Layer esto ahora incluye traer contenido de varias fuentes externas, como el CMS Hygraph.

Usando el cargador de Hygraph

Para usar el nuevo cargador (en beta), primero instala el paquete @hygraph/hygraph-astro-loader:

npm install @hygraph/hygraph-astro-loader

En el panel de Hygraph, encuentra el endpoint de tu API y copia la URL y proporciónala como una variable de entorno, nombrándola algo como HYGRAPH_ENDPOINT.

Luego importa y usa el loader dentro de tu archivo de configuración src/content/config.ts:

import { defineCollection, z } from 'astro:content';
import { HygraphLoader } from '@hygraph/hygraph-astro-loader';

const pages = defineCollection({
  loader: HygraphLoader({
    endpoint: import.meta.env.HYGRAPH_ENDPOINT,
    operation: 'pages',
    fields: ["id", "title", "slug", { "body": ["text"] }],
  }),

  schema: z.object({
    id: z.string(),
    title: z.string({
      required_error: 'Title is required'
    }).min(1, {
      message: 'Title is required to be at least 1 character'
    }),
    slug: z.string(),
    body: z.object({
      text: z.string(),
    }),
  })
})

export const collections = { pages }

Y eso es todo, desde aquí puedes consultar y usar colecciones de la misma manera que lo harías para colecciones locales. Revisa la documentación de Astro sobre content collections para aprender más.

También revisa el análisis profundo de ayer sobre Content Layer para aprender cómo funcionan los cargadores, y cómo puedes construir el tuyo propio. También revisa el repositorio de GitHub del cargador de Hygraph para reportar problemas y contribuir.