Hygraph & Astro
Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.
Hygraph is a federated content management platform. It exposes a GraphQL endpoint for fetching content.
Integrating with AstroSection titled Integrating with Astro
In this section, you’ll create a Hygraph GraphQL endpoint to fetch with Astro.
PrerequisitesSection titled Prerequisites
To get started, you will need to have the following:
A Hygraph account and project. If you don’t have an account, you can sign up for free and create a new project.
Hygraph access permissions - In
Project Settings > API Access, configure Public Content API permissions to allow read requests without authentication. If you haven’t set any permissions, you can click Yes, initialize defaults to add the required permissions to use the “High Performance Content API”.
Setting up the endpointSection titled Setting up the endpoint
To add your Hygraph endpoint to Astro, create a
.env file in the root of your project with the following variable:
Now, you should be able to use this environment variable in your project.
If you would like to have IntelliSense for your environment variables, you can create a
env.d.ts file in the
src/ directory and configure
ImportMetaEnv like this:
Your root directory should now include these new files:
Fetching dataSection titled Fetching data
Fetch data from your Hygraph project by using the
For example, to fetch entries of a
blogPosts content type that has a string field
title, create a GraphQL query to fetch that content. Then, define the type of the content, and set it as the type of the response.
DeploySection titled Deploy
Configuring Netlify WebhookSection titled Configuring Netlify Webhook
To set up a webhook in Netlify:
Deploy your site to Netlify with this guide. Remember to add your
HYGRAPH_ENDPOINTto the enviroment variables.
Then Go to your Hygraph project dashboard and click on Apps.
Go to the marketplace and search for Netlify and follow the instructions provided.
If all went good, now you can deploy your website with a click in the Hygraph interface.