Hygraph

Hygraph (formerly GraphCMS) is a GraphQL-native headless CMS. If your team already uses GraphQL, Hygraph feels natural. Define schemas visually, query exactly the fields you need, and get typed responses.

Last updated: 2026-03-29

Setup

Create a Hygraph project and define your content models using the visual schema editor. Hygraph generates a GraphQL API endpoint automatically.

Terminal

# .env
HYGRAPH_ENDPOINT=https://api-<region>.hygraph.com/v2/<project-id>/master
HYGRAPH_TOKEN=your-permanent-auth-token

Install & Configure

Use graphql-request or plain fetch to query Hygraph's GraphQL API. No heavy SDK needed. Just send queries and get exactly the data you asked for.

Terminal

# Install graphql-request
npm install graphql-request graphql

# src/lib/hygraph.js
import { GraphQLClient, gql } from 'graphql-request';

const client = new GraphQLClient(
  import.meta.env.HYGRAPH_ENDPOINT,
  {
    headers: {
      Authorization: `Bearer ${import.meta.env.HYGRAPH_TOKEN}`,
    },
  }
);

export async function getPosts() {
  const query = gql`
    query Posts {
      posts(orderBy: publishedAt_DESC) {
        id
        title
        slug
        excerpt
        publishedAt
        coverImage {
          url
        }
      }
    }
  `;
  const { posts } = await client.request(query);
  return posts;
}

export async function getPostBySlug(slug) {
  const query = gql`
    query Post($slug: String!) {
      post(where: { slug: $slug }) {
        title
        content { html }
        coverImage { url }
        author { name avatar { url } }
      }
    }
  `;
  const { post } = await client.request(query, { slug });
  return post;
}

Render in Astro

Fetch from Hygraph in Astro frontmatter. GraphQL lets you request exactly the fields each page needs. No over-fetching, no wasted bandwidth.

Terminal

---
// src/pages/blog/index.astro
import { getPosts } from '../../lib/hygraph';

const posts = await getPosts();
---

<section class="grid gap-8">
  {posts.map((post) => (
    <a href={`/blog/${post.slug}`} class="group">
      <img src={post.coverImage.url} alt={post.title} class="rounded-xl" />
      <h2 class="mt-3 text-xl font-semibold">{post.title}</h2>
      <p class="text-gray-500">{post.excerpt}</p>
    </a>
  ))}
</section>

Best Practices

Hygraph shines when you lean into GraphQL. Write precise queries and use its built-in asset pipeline.