NextJS项目中GraphQL请求GraphCMS返回undefined问题求助

核心问题 #

你遇到的TypeError: Cannot read properties of undefined (reading 'title')源于三个关键错误：

• Next.js 页面未使用框架认可的数据获取函数，自定义的GraphQLRequest不会被自动执行，导致组件接收的posts为undefined
• GraphQL 查询返回的结构与组件预期不匹配，查询结果是postsConnection.edges数组结构，而非直接的单篇文章对象
• 代码中存在未定义的title变量，且查询并未用到该变量，属于冗余错误代码

修复步骤 #

1. 替换为Next.js官方数据获取函数 #

Next.js 页面必须使用getStaticProps（静态生成）或getServerSideProps（服务端渲染）来获取数据，自定义函数不会被框架调用执行。这里以getStaticProps为例修改。

2. 正确解析GraphQL查询结果 #

你的查询返回的是postsConnection结构，其中edges是文章节点的数组，每个edge.node才是单篇文章的完整数据，需要提取这些节点作为posts传递给组件。

3. 移除冗余的未定义变量 #

查询中没有用到title变量，直接删除相关冗余代码即可。

4. 组件中正确渲染数组数据 #

因为获取的是多篇文章的集合，需要用map遍历数组渲染每篇文章的标题，而非直接访问posts.title。

修复后的完整代码 #

import Head from "next/head";
import Header from "../components/home/Header";

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

const Writing = ({ posts }) => {
  return (
    <>
      {/* 遍历posts数组，渲染每篇文章的标题 */}
      {posts.map((post) => (
        <p key={post.id}>{post.title}</p>
      ))}
    </>
  );
};

export default Writing;

const url = "[my content api]";

const client = new GraphQLClient(url, {
  headers: {
    Authorization: `Bearer [my permanent auth token]`,
  },
});

const query = gql`
  query MyQuery {
    postsConnection {
      edges {
        node {
          date
          id
          slug
          title
        }
      }
    }
  }
`;

// 使用Next.js官方的getStaticProps获取数据
export async function getStaticProps() {
  // 直接执行查询，移除无用变量
  const response = await client.request(query);
  
  // 从查询结果中提取文章节点数组
  const posts = response.postsConnection.edges.map(edge => edge.node);
  
  return {
    props: { posts }, // 将处理后的posts传递给组件
    // 可选：开启增量静态生成，每隔60秒重新生成页面
    // revalidate: 60,
  };
}

额外验证建议 #

1. 运行项目后打开浏览器控制台，可在getStaticProps中添加console.log(response)，确认返回的GraphQL数据结构正确
2. 检查GraphCMS后台，确保posts模型包含title字段且已有已发布的内容
3. 确认GraphCMS的API令牌拥有posts模型的读取权限

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