Hygraph & Astro

Hygraph 是一个联合内容管理平台。它提供一个 GraphQL 端点用于获取内容。

与 Astro 集成

在本节中，你将创建一个 Hygraph GraphQL 端点，以便与 Astro 一起获取数据。

先决条件

要开始，你需要具备以下条件

一个 Hygraph 帐户和项目。如果你没有帐户，可以免费注册并创建一个新项目。
Hygraph 访问权限 - 在 Project Settings > API Access 中，配置 Public Content API 权限，以允许未经身份验证的读取请求。如果你尚未设置任何权限，可以单击 Yes, initialize defaults 来添加使用“High Performance Content API”所需的权限。

设置端点

要将你的 Hygraph 端点添加到 Astro，请在你的项目根目录中创建一个 .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>