Hygraph & Astro

Hygraph est une plateforme de gestion de contenu fédérée. Elle expose un point de terminaison GraphQL pour récupérer du contenu.

Intégration avec Astro

Dans cette section, vous allez créer un point d’accès GraphQL Hygraph pour récupérer du contenu avec Astro.

Prérequis

Pour commencer, vous devez disposer des éléments suivants :

Un compte Hygraph et un projet. Si vous n’avez pas de compte, vous pouvez vous inscrire gratuitement et créer un nouveau projet.
Autorisation d’accès à Hygraph - Dans Project Settings > API Access, configurez les permissions de l’API Public Content pour autoriser les requêtes en lecture sans authentification. Si vous n’avez pas défini de permissions, vous pouvez cliquer sur Yes, initialize defaults pour ajouter les permissions nécessaires à l’utilisation de “High Performance Content API”.

Configuration du point de terminaison

Pour ajouter votre point de terminaison Hygraph à Astro, créez un fichier .env à la racine de votre projet avec la variable suivante :

HYGRAPH_ENDPOINT=YOUR_HIGH_PERFORMANCE_API

Maintenant, vous devriez être capable d’utiliser cette variable d’environnement dans votre projet.

Si vous voulez avoir IntelliSense pour vos variables d’environnement, vous pouvez créer un fichier env.d.ts dans le répertoire src/ et configurer ImportMetaEnv comme ceci :

interface ImportMetaEnv {
  readonly HYGRAPH_ENDPOINT: string;
}

Votre répertoire racine doit maintenant contenir ces nouveaux fichiers :

Répertoiresrc/
- env.d.ts
.env
astro.config.mjs
package.json

Récupérer des données

Récupérez les données de votre projet Hygraph en utilisant le HYGRAPH_ENDPOINT.

Par exemple, pour récupérer les entrées d’un type de contenu blogPosts qui a un champ de chaîne title, créez une requête GraphQL pour récupérer ce contenu. Ensuite, définissez le type du contenu, et définissez-le comme type de la réponse.

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

Déployer

Configuration de Netlify Webhook

Pour configurer un webhook dans Netlify :

Déployez votre site sur Netlify avec ce guide. N’oubliez pas d’ajouter votre HYGRAPH_ENDPOINT aux variables d’environnement.
Allez ensuite sur le tableau de bord de votre projet Hygraph et cliquez sur Apps.
Allez sur la place de marché, recherchez Netlify et suivez les instructions fournies.
Si tout s’est bien passé, vous pouvez maintenant déployer votre site web en un clic dans l’interface de Hygraph.