Skip to content

hygraph/hygraph-astro-loader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Hygraph Astro Content Loader

Beta build of this project. Please report any issues.

A package to add a Hygraph loader to your Astro project. For more information on Astro Content Loaders, see the Astro's deep dive on Content Loaders.

Installation

npm install @hygraph/astro-content-loader

Usage

Before using the loader, you need to set up or collect the follwing from your Hygraph project:

  • API Endpoint (configured through your project settings)
    • For testing, we recommend initializing your Public Content API and using the endpoint provided.
  • If you don't have a Public Content API, but instead have a regular endpoint, you'll need to create a Permanent Access Token for the API and use that in your loader's optional token property.

Once that's done, you're ready to set things up in Astro.

In your /content directory, add a config.ts file if it doesn't already exist with the following content:

import { HygraphLoader } from '@hygraph/astro-content-loader';


const pages = defineCollection({
    loader: HygraphLoader({
        endpoint: 'MY_API_ENDPOINT',
        operation: 'pages',
        fields: ["id", "title", "slug", { "body": ["text"] }],
    }),
    schema: z.object({
        id: z.string(),
        title: z.string({ required_error: 'Title is required' }).min(1, { message: 'Title is required to be at least 1 character' } ),
        slug: z.string(),
        body: z.object({
            text: z.string(),
        }),
    })})

    export const collections = { pages };

The pages collection will now be available in your Astro project. It can be accessed both as data in frontmatter, but also to create pages or respond to params.

---
import { getCollection } from 'astro:content';
export async function getStaticPaths() {
    const pages = await getCollection('pages');
    return pages.map(page => ({
        params: { slug: page.slug },
        props: { page },
    }));
}
const { page } = Astro.props;---
---

<h1>{page.title}</h1>
<div>{page.body.text}</div>

Options

Property Description Required
endpoint The endpoint of your Hygraph API. required
operation The operation to perform on the API. (listed in Hygraph as Plural API ID) required
fields Array fields to fetch from the API. required
token Optional token to pass to the API. optional
variables Optional variables to pass to the GraphQL API optional
richText Optional identifier for your Rich Text field to render HTML. Requires the html string from your Rich Text data. optional

Validating the schema is optional, but recommended. The schema is used to validate the data returned from the API. Use Zod to define the schema of what you expect from the API.

Rendering Rich Text

If you're using a Rich Text field in your Hygraph project, you can use the richText property to render the HTML in your Astro project.

const pages = defineCollection({
    loader: HygraphLoader({
        endpoint: 'MY_API_ENDPOINT',
        operation: 'pages',
        fields: ["id", "title", "slug", { "body": ["html"] }],
        richText: 'body',
    }),
    schema: z.object({
        id: z.string(),
        title: z.string({ required_error: 'Title is required' }).min(1, { message: 'Title is required to be at least 1 character' } ),
        slug: z.string(),
        body: z.object({
            html: z.string(),
        }),
    })})

This will send the HTML to Astro's <Content /> component to render the HTML.

---
import { getEntry } from 'astro:content';
import Layout from '../../layouts/Layout.astro';
import { getCollection, render } from 'astro:content';
export async function getStaticPaths() {
	const posts = await getCollection('pages');
	return posts.map((post) => ({
		params: { slug: post.data.slug },
		props: post,
	}));
}

const post = await getEntry('pages', Astro.props.id)
const { Content } = await render(post);
---

<Layout title="">
    <h1>{post.data.title}</h1>
    <Content />
</Layout>

Want to test but don't have a Hygraph project?

Use one of these starters to get started with Hygraph and Astro:

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published