如何将Hygraph(GraphCMS) GraphQL查询结果映射到React元素

1. 安装必要依赖 #

如果用轻量方案，推荐使用graphql-request：

npm install graphql graphql-request

如果你的项目需要复杂状态管理，也可以用@apollo/client，但以下示例以轻量方案为主。

2. 编写Hygraph查询函数 #

新建lib/hygraph.js文件，配置API端点并定义查询：

import { request, gql } from 'graphql-request';

// 替换成你的Hygraph API端点
const HYGRAPH_ENDPOINT = 'https://your-hygraph-endpoint.com/v2/xxx/master';

// 获取帖子列表的GraphQL查询
export const getPosts = async () => {
  const query = gql`
    query GetPosts {
      posts {
        id
        title
        content
        createdAt
        # 这里添加你需要的其他字段，要和Hygraph模型里的字段一致
      }
    }
  `;

  // 如果你的API需要密钥，添加headers参数
  const headers = {
    Authorization: 'Bearer 你的Hygraph API密钥'
  };

  return await request(HYGRAPH_ENDPOINT, query, {}, { headers });
};

3. 在React组件中调用查询并渲染数据 #

在组件中使用useState管理数据状态，useEffect触发异步查询：

import { useState, useEffect } from 'react';
import { getPosts } from '../lib/hygraph';

function PostsList() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchPostsData = async () => {
      try {
        const response = await getPosts();
        // 注意：response结构要和你的查询返回一致，比如response.posts
        setPosts(response.posts);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchPostsData();
  }, []);

  // 处理加载状态
  if (loading) return <div>加载中...</div>;
  // 处理错误状态
  if (error) return <div>加载失败：{error}</div>;

  // 映射数据到页面元素
  return (
    <div className="posts-wrapper">
      <h1>所有帖子</h1>
      {posts.map(post => (
        <div key={post.id} className="post-item">
          <h2>{post.title}</h2>
          <p className="post-date">
            {new Date(post.createdAt).toLocaleDateString('zh-CN')}
          </p>
          {/* 如果是富文本内容，用dangerouslySetInnerHTML渲染 */}
          <div className="post-content" dangerouslySetInnerHTML={{ __html: post.content }} />
        </div>
      ))}
    </div>
  );
}

export default PostsList;

关键注意事项 #

• 确认Hygraph的API权限设置：如果是公共访问，需在Hygraph后台开启对应模型的"公共API访问"；如果是私有API，必须携带正确的授权密钥。
• 检查查询字段匹配：确保GraphQL查询中的字段和Hygraph模型里的字段完全一致，包括大小写。
• 映射时必须加key：使用帖子的id作为唯一key，避免React渲染警告。
• 富文本处理：如果内容是Markdown格式，可以用react-markdown替代dangerouslySetInnerHTML，更安全。

内容的提问来源于stack exchange，提问作者Konjak