海格拉夫与 Astro

Hygraph 是一个联合内容管理平台。它公开了一个用于获取内容的 GraphQL 端点。

¥Hygraph is a federated content management platform. It exposes a GraphQL endpoint for fetching content.

与 Astro 集成

¥Integrating with Astro

在本部分中，你将创建一个 Hygraph GraphQL 端点以使用 Astro 进行获取。

¥In this section, you’ll create a Hygraph GraphQL endpoint to fetch with Astro.

先决条件

¥Prerequisites

首先，你需要具备以下条件：

¥To get started, you will need to have the following:

Hygraph 账户和项目。如果你没有账户，你可以免费注册并创建一个新项目。
Hygraph 访问权限 - 在 Project Settings > API Access 中，配置公共内容 API 权限以允许无需身份验证的读取请求。如果你尚未设置任何权限，你可以单击“是，初始化默认值”以添加使用 “高性能内容 API” 所需的权限。

设置端点

¥Setting up the endpoint

要将 Hygraph 端点添加到 Astro，请使用以下变量在项目的根目录中创建 .env 文件：

¥To add your Hygraph endpoint to Astro, create a .env file in the root of your project with the following variable:

HYGRAPH_ENDPOINT=YOUR_HIGH_PERFORMANCE_API

现在，你应该能够在项目中使用此环境变量。

¥Now, you should be able to use this environment variable in your project.

如果你希望环境变量具有 IntelliSense，你可以在 src/ 目录中创建一个 env.d.ts 文件并配置 ImportMetaEnv，如下所示：

¥If you would like to have IntelliSense for your environment variables, you can create a env.d.ts file in the src/ directory and configure ImportMetaEnv like this:

interface ImportMetaEnv {
  readonly HYGRAPH_ENDPOINT: string;
}

你的根目录现在应该包含这些新文件：

¥Your root directory should now include these new files:

Directorysrc/
- env.d.ts
.env
astro.config.mjs
package.json

获取数据

¥Fetching data

使用 HYGRAPH_ENDPOINT 从 Hygraph 项目中获取数据。

¥Fetch data from your Hygraph project by using the HYGRAPH_ENDPOINT.

例如，要获取具有字符串字段 title 的 blogPosts 内容类型的条目，请创建一个 GraphQL 查询来获取该内容。然后，定义内容的类型，并将其设置为响应的类型。

¥For example, to fetch entries of a blogPosts content type that has a string field title, create a GraphQL query to fetch that content. Then, define the type of the content, and set it as the type of the response.

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

部署

¥Deploy

配置 Netlify Webhook

¥Configuring Netlify Webhook

要在 Netlify 中设置 Webhook：

¥To set up a webhook in Netlify:

Deploy your site to Netlify with this guide. Remember to add your HYGRAPH_ENDPOINT to the environment variables.
Then Go to your Hygraph project dashboard and click on Apps.
Go to the marketplace and search for Netlify and follow the instructions provided.
If all went good, now you can deploy your website with a click in the Hygraph interface.