Caisy & Astro

本頁內容尚未翻譯。

Caisy is a headless CMS that exposes a GraphQL API to access content.

Using Caisy CMS with Astro

Use graphql-request and Caisy's rich text renderer for Astro to fetch your CMS data and display your content on an Astro page:

---
import RichTextRenderer from '@caisy/rich-text-astro-renderer';
import { gql, GraphQLClient } from 'graphql-request';

const params = Astro.params;

const client = new GraphQLClient(
	`https://cloud.caisy.io/api/v3/e/${import.meta.env.CAISY_PROJECT_ID}/graphql`,
	{
		headers: {
			'x-caisy-apikey': import.meta.env.CAISY_API_KEY
		}
	}
);
const gqlResponse = await client.request(
	gql`
		query allBlogArticle($slug: String) {
			allBlogArticle(where: { slug: { eq: $slug } }) {
				edges {
					node {
						text {
							json
						}
						title
						slug
						id
					}
				}
			}
		}
	`,
	{ slug: params.slug }
);

const post = gqlResponse?.allBlogArticle?.edges?.[0]?.node;
---
<h1>{post.title}</h1>
<RichTextRenderer node={post.text.json} />