Caisy & Astro

Caisy는 콘텐츠에 엑세스하기 위해 GraphQL API를 노출하는 헤드리스 CMS입니다.

Astro와 함께 Caisy CMS 사용하기

Astro용 graphql-request와 Caisy의 서식이 있는 텍스트 렌더러를 사용하여 CMS 데이터를 가져오고 Astro 페이지에 콘텐츠를 표시하세요.

---
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} />