Headless CMS for Astro

Hygraph is the ideal Headless CMS for Astro websites and applications. Read further to learn how our API-first CMS allows you to add components to your Astro apps in minutes and enable your website's content to be managed from a powerful CMS.

Step #1 - Construct your query and fetch the data from Hygraph

To integrate a headless CMS with an Astro website or application, start by constructing your query like the example on the right and store this as a variable.

Afterwards use the fetch() function to call the API and fetch data from Hygraph's GraphQL API.

interface Post {
  title: string;
}

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

const response = await fetch(YOUR_HYGRAPH_ENDPOINT, query);
const json = await response.json();
const posts: Post[] = json.data.blogPosts;

Step #2 - Work with data within Astro files

Fetching data from Hygraph and then using it in Astro files is a straightforward process. Hygraph's GraphQL API allows for efficient data retrieval, and Astro's file system is designed for easy integration.

By combining the two, you can seamlessly incorporate dynamic content from Hygraph into your Astro website, enabling you to create dynamic and engaging web experiences with minimal complexity.

<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>My Astro and Hygraph Blog</title>
  </head>
  <body>
    <h1>Blog Posts</h1>
    {
      posts.map((post) => (
        <div>
          <h2>{post.title}</h2>
          <p>{post.description}</p>
          <img src={post.image.url} />
        </div>
      ))
    }
  </body>
</html>

Start building with Astro

We made it really easy to set up your project in Hygraph and use our GraphQL API within your Astro project.

Quickstart

Check out our docs to see how you can quickly set up your Hygraph project and enable the content API for your Astro website or app.

Get Started

Learn GraphQL

Hygraph is GraphQL-native Headless CMS offers precise data retrieval, minimizing over-fetching and optimizing efficiency.

Read the Guide

Examples

Look at some of the example projects to see Hygraph in action.

See Examples

Why Hygraph

Choosing Hygraph for your Astro project

When selecting a headless CMS for an Astro project, opting for one with native GraphQL capabilities is the smart choice. Native GraphQL support streamlines the content retrieval, reducing unnecessary complexity and ensuring you only fetch the data you need.

This efficiency ensures you don't increase the build time of your Astro website while simplifying content management. With a headless CMS offering native GraphQL, you empower your Astro project with a flexible and agile content layer, making it an ideal match for modern web development needs.

Developer Experience

We try to be the most un-opinionated CMS on the market with a wide collection of open source example projects to get you started.

Headless CMS

As a headless CMS (i.e. API based content management), you can be as modular and flexible as you need. We even support multiplatform content management.

Management API

Hygraph boasts a flexible and powerful management API to manage your content and schema, as well as a blazing fast content API.

Get started for free, or request a demo to discuss larger projects

Contact sales Get started