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 de terminaison 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 « l'API de contenu à haute performance (High Performance Content API, en anglais) ».

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

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

:::noteEn savoir plus sur l'utilisation des variables d'environnement et les fichiers .env dans Astro.:::

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 point de terminaison 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="fr">
	<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 d'un webhook Netlify

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.