Hygraph y Astro

Hygraph es una plataforma de gestión de contenido federada. Expone un endpoint de GraphQL para obtener contenido.

Integración con Astro

En esta sección, crearás un endpoint de GraphQL de Hygraph para realizar consultas con Astro.

Requisitos previos

Para empezar, necesitarás lo siguiente:

Una cuenta y proyecto de Hygraph. Si no tienes una cuenta, puedes registrarte gratis y crear un nuevo proyecto.
Permisos de acceso de Hygraph - En Project Settings > API Access, configura los permisos de Public Content API para permitir solicitudes de lectura sin autenticación. Si no has establecido ningún permiso, puedes hacer clic en Yes, initialize defaults para agregar los permisos necesarios para usar la “High Performance Content API”.

Configuración del endpoint

Para añadir tu endpoint de Hygraph a Astro, crea un archivo .env en la raíz de tu proyecto con la siguiente variable:

HYGRAPH_ENDPOINT=YOUR_HIGH_PERFORMANCE_API

Ahora deberías poder utilizar esta variable de entorno en tu proyecto.

Si deseas tener IntelliSense para tus variables de entorno, puedes crear un archivo env.d.ts en el directorio src/ y configurar ImportMetaEnv de esta manera:

interface ImportMetaEnv {
  readonly HYGRAPH_ENDPOINT: string;
}

Tu directorio raíz ahora debería incluir estos nuevos archivos:

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

Obtención de datos

Obtén datos de tu proyecto de Hygraph utilizando el HYGRAPH_ENDPOINT.

Por ejemplo, para obtener las entradas de un tipo de contenido blogPosts que tenga un campo de tipo string llamado title, crea una consulta GraphQL para obtener ese contenido. Luego, define el tipo del contenido y establécelo como el tipo de la respuesta.

---
interface Post {
  title: string;
}

const query = {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    query: `
      {
        blogPosts {
          title
        }
      }`,
  }),
};

const response = await fetch(import.meta.env.HYGRAPH_ENDPOINT, query);
const json = await response.json();
const posts: Post[] = json.data.blogPosts;
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
  </head>
  <body>
    <h1>Astro</h1>
    {
      posts.map((post) => (
        <div>
          <h2>{post.title}</h2>
        </div>
      ))
    }
  </body>
</html>

Despliegue

Configuración del webhook de Netlify

Para configurar un webhook en Netlify:

Despliega tu sitio en Netlify con esta guía. Recuerda añadir tu HYGRAPH_ENDPOINT a las variables de entorno.
Luego ve al panel de control de tu proyecto de Hygraph y haz clic en Apps.
Ve al marketplace, busca Netlify y sigue las instrucciones proporcionadas.
Si todo va bien, ahora puedes desplegar tu sitio web con un clic en la interfaz de Hygraph.