Hygraph y Astro

Hygraph es un gestor de contenido federado. Expone un endpoint de GraphQL para obtener contenido.

Integración con Astro

En esta sección, crearás un Hygraph de GraphQL para obtener contenido con Astro.

Prerrequisitos

Para empezar, necesitarás lo siguiente:

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

Configurando el endpoint

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

HYGRAPH_ENDPOINT=TU_API_DE_ALTO_RENDIMIENTO

Ahora, deberías poder usar 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:

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

Obteniendo datos

Obtén los datos de tu proyecto de Hygraph usando HYGRAPH_ENDPOINT.

Por ejemplo, para obtener las entradas de un tipo de contenido blogPosts que tiene un campo de tipo string title, crea una consulta GraphQL para obtener ese contenido. Luego, define el tipo de contenido y configúralo como el tipo de 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

Configurando el Webhook de Netlify

Para configurar un webhook en Netlify:

Despliega tu sitio en Netlify con esta guía. Recuerda agregar 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 y busca Netlify y sigue las instrucciones proporcionadas.
Si todo salió bien, ahora puedes desplegar tu sitio web con un clic en la interfaz de Hygraph.