Next.js与Hygraph数据集成：解决map错误及API认证指南

import { GraphQLClient } from 'graphql-request';

// 将您的Hygraph API端点和令牌值替换为实际值
const HYGRAPH_API_URL = "https://api-eu-west-2.hygraph.com/v2/xxxxxxxxxxxxxx/master"; // 您的Hygraph API端点
const HYGRAPH_API_TOKEN = "YOUR_TOKEN_VALUE"; // 您的Hygraph API令牌

const graphcms = new GraphQLClient(HYGRAPH_API_URL, {
  headers: {
    // 确保 'Bearer' 和令牌值之间有一个空格
    Authorization: `Bearer ${HYGRAPH_API_TOKEN}`,
  },
});

# .env.local
HYGRAPH_API_URL="https://api-eu-west-2.hygraph.com/v2/xxxxxxxxxxxxxx/master"
HYGRAPH_API_TOKEN="ghc_YOUR_ACTUAL_HYGRAPH_TOKEN_HERE"

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

const HYGRAPH_API_URL = process.env.HYGRAPH_API_URL;
const HYGRAPH_API_TOKEN = process.env.HYGRAPH_API_TOKEN;

if (!HYGRAPH_API_URL || !HYGRAPH_API_TOKEN) {
  console.error("Hygraph API URL or Token is not defined. Please check your .env.local file.");
  // 在生产环境中，您可能希望抛出错误或提供一个回退机制
}

const graphcms = new GraphQLClient(HYGRAPH_API_URL, {
  headers: {
    Authorization: `Bearer ${HYGRAPH_API_TOKEN}`,
  },
});

const QUERY = gql`
  query GetArticles {
    articles {
      createdAt
      id
      publishedAt
      released
      slug
      title
      updatedAt
      coverPhoto {
        url
      }
      content {
        html
      }
    }
  }
`;

export async function getArticles() {
  try {
    const { articles } = await graphcms.request(QUERY);
    return articles;
  } catch (error) {
    console.error("Error fetching articles from Hygraph:", error);
    // 在数据获取失败时返回一个空数组，以避免后续的 `map` 错误
    return [];
  }
}

// app/page.js
import styles from './page.module.css';
import { getArticles } from '../lib/hygraph-data'; // 假设您将上述数据获取逻辑放在一个单独的文件中，例如 lib/hygraph-data.js

export default async function Home() {
  const articles = await getArticles(); // 直接等待数据

  return (
    <main className={styles.main}>
      {articles && articles.length > 0 ? (
        articles.map((article) => (
          // 确保为列表项提供一个唯一的 key
          <h1 key={article.id}>{article.title}</h1>
        ))
      ) : (
        <p>暂无文章或加载失败。</p>
      )}
    </main>
  );
}

// lib/hygraph-data.js
import { GraphQLClient, gql } from 'graphql-request';

// 确保在 .env.local 中配置这些变量
const HYGRAPH_API_URL = process.env.HYGRAPH_API_URL;
const HYGRAPH_API_TOKEN = process.env.HYGRAPH_API_TOKEN;

// 验证环境变量是否已设置
if (!HYGRAPH_API_URL || !HYGRAPH_API_TOKEN) {
  console.error("错误：Hygraph API URL 或 Token 未定义。请检查您的 .env.local 文件。");
  // 在开发环境中可以抛出错误，在生产环境中可能需要更优雅的错误处理
  // throw new Error("Hygraph API URL or Token is missing.");
}

const graphcms = new GraphQLClient(HYGRAPH_API_URL, {
  headers: {
    Authorization: `Bearer ${HYGRAPH_API_TOKEN}`,
  },
});

const QUERY = gql`
  query GetArticles {
    articles {
      createdAt
      id
      publishedAt
      released
      slug
      title
      updatedAt
      coverPhoto {
        url
      }
      content {
        html
      }
    }
  }
`;

export async function getArticles() {
  try {
    const data = await graphcms.request(QUERY);
    // 确保返回的是 articles 数组，即使为空也是空数组
    return data.articles || [];
  } catch (error) {
    console.error("从 Hygraph 获取文章时发生错误:", error);
    // 在发生错误时返回一个空数组，确保 Home 组件不会收到 undefined
    return [];
  }
}

// app/page.js
import styles from './page.module.css';
import { getArticles } from '../lib/hygraph-data'; // 导入数据获取函数

// 这是一个 Next.js 服务器组件
export default async function Home() {
  const articles = await getArticles(); // 在组件渲染前异步获取数据

  return (
    <main className={styles.main}>
      <h1>最新文章</h1>
      {articles.length > 0 ? (
        <div className={styles.articleList}>
          {articles.map((article) => (
            <div key={article.id} className={styles.articleCard}>
              <h2>{article.title}</h2>
              {article.coverPhoto && (
                <img src={article.coverPhoto.url} alt={article.title} className={styles.coverPhoto} />
              )}
              {/* 这里可以根据需要渲染更多内容，例如 content.html */}
              {/* <div dangerouslySetInnerHTML={{ __html: article.content.html }} /> */}
              <p>发布于: {new Date(article.publishedAt).toLocaleDateString()}</p>
            </div>
          ))}
        </div>
      ) : (
        <p>目前没有可用的文章，请稍后再试。</p>
      )}
    </main>
  );
}

# .env.local
HYGRAPH_API_URL="https://api-eu-west-2.hygraph.com/v2/YOUR_PROJECT_ID/master"
HYGRAPH_API_TOKEN="ghc_YOUR_ACTUAL_HYGRAPH_TOKEN_HERE"