Hygraph & Astro

Hygraph는 통합 콘텐츠 관리 플랫폼입니다. 콘텐츠를 가져오기 위한 GraphQL 엔드포인트를 노출합니다.

Astro와 통합

이 섹션에서는 Astro로 가져올 Hygraph GraphQL 엔드포인트를 만듭니다.

전제조건

시작하려면 다음이 필요합니다.

Hygraph 계정 및 프로젝트. 계정이 없다면 무료 회원가입 후 새 프로젝트를 생성하실 수 있습니다.
Hygraph 접근 권한 - Project Settings > API Access에서 인증 없이 읽기 요청을 허용하도록 공개 콘텐츠 API 권한을 구성합니다. 권한을 설정하지 않은 경우 Yes, initialize defaults를 클릭하여 “High Performance Content API”를 사용하는 데 필요한 권한을 추가할 수 있습니다.

엔드포인트 설정

Astro에 Hygraph 엔드포인트를 추가하려면 다음 변수를 사용하여 프로젝트 루트에 .env 파일을 생성하세요.

HYGRAPH_ENDPOINT=YOUR_HIGH_PERFORMANCE_API

이제 프로젝트에서 이 환경 변수를 사용할 수 있습니다.

환경 변수에 IntelliSense를 사용하려면 src/ 디렉터리에 env.d.ts 파일을 만들고 다음과 같이 ImportMetaEnv를 구성하면 됩니다.

interface ImportMetaEnv {
  readonly HYGRAPH_ENDPOINT: string;
}

이제 루트 디렉터리에 다음과 같은 새 파일이 포함되어야 합니다.

디렉터리src/
- env.d.ts
.env
astro.config.mjs
package.json

데이터 가져오기

HYGRAPH_ENDPOINT를 사용하여 Hygraph 프로젝트에서 데이터를 가져옵니다.

예를 들어 문자열 필드 title이 있는 blogPosts 콘텐츠 타입의 항목을 가져오려면 GraphQL 쿼리를 생성하여 해당 콘텐츠를 가져옵니다. 그런 다음 콘텐츠 타입을 정의하고 이를 응답 타입으로 설정합니다.

---
interface Post {
  title: string;
}

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

const response = await fetch(import.meta.env.HYGRAPH_ENDPOINT, query);
const json = await response.json();
const posts: Post[] = json.data.blogPosts;
---

<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>Astro</title>
  </head>
  <body>
    <h1>Astro</h1>
    {
      posts.map((post) => (
        <div>
          <h2>{post.title}</h2>
        </div>
      ))
    }
  </body>
</html>