Next.js博客分页加载功能报错求助（GraphQL+WordPress栈）

问题描述 #

我用Next.js、GraphQL和WordPress搭了个博客，正在实现分页加载功能。目前已经能限制查询输出数量，但点击「加载更多」按钮时直接报错，部署到Vercel平台也出现错误。下面是核心代码和具体报错信息，求帮忙排查解决。

核心代码 #

api.ts #

// 请替换为你的api.ts核心代码
// 示例：
import { GraphQLClient } from 'graphql-request';

export const client = new GraphQLClient(process.env.NEXT_PUBLIC_WP_GRAPHQL_ENDPOINT || '');

Queries.ts #

// 请替换为你的Queries.ts核心代码
// 示例：
import { gql } from 'graphql-request';

export const GET_POSTS = gql`
  query GetPosts($first: Int!, $offset: Int!) {
    posts(first: $first, offset: $offset) {
      edges {
        node {
          id
          title
          excerpt
        }
      }
      pageInfo {
        hasNextPage
      }
    }
  }
`;

LoadMore.tsx #

// 请替换为你的LoadMore.tsx核心代码
// 示例：
'use client';

import { useState } from 'react';
import { client } from '@/lib/api';
import { GET_POSTS } from '@/lib/Queries';

export default function LoadMore({ currentPosts, setPosts, currentOffset, setCurrentOffset }) {
  const [isLoading, setIsLoading] = useState(false);

  const handleLoadMore = async () => {
    setIsLoading(true);
    try {
      const newOffset = currentOffset + 10;
      const data = await client.request(GET_POSTS, { first: 10, offset: newOffset });
      setPosts([...currentPosts, ...data.posts.edges]);
      setCurrentOffset(newOffset);
    } catch (error) {
      console.error('加载更多失败:', error);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <button onClick={handleLoadMore} disabled={isLoading}>
      {isLoading ? '加载中...' : '加载更多'}
    </button>
  );
}

Result.tsx #

// 请替换为你的Result.tsx核心代码
// 示例：
'use client';

import { useState, useEffect } from 'react';
import { client } from '@/lib/api';
import { GET_POSTS } from '@/lib/Queries';
import LoadMore from './LoadMore';

export default function Result() {
  const [posts, setPosts] = useState([]);
  const [currentOffset, setCurrentOffset] = useState(0);

  useEffect(() => {
    const fetchPosts = async () => {
      const data = await client.request(GET_POSTS, { first: 10, offset: 0 });
      setPosts(data.posts.edges);
    };
    fetchPosts();
  }, []);

  return (
    <div>
      {posts.map((post) => (
        <div key={post.node.id}>
          <h3>{post.node.title}</h3>
          <p>{post.node.excerpt}</p>
        </div>
      ))}
      <LoadMore 
        currentPosts={posts} 
        setPosts={setPosts} 
        currentOffset={currentOffset} 
        setCurrentOffset={setCurrentOffset} 
      />
    </div>
  );
}

报错信息 #

前端点击加载更多报错 #

// 请粘贴你的前端报错内容，示例：
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'edges')
    at handleLoadMore (LoadMore.tsx:14:35)

Vercel部署报错 #

// 请粘贴你的Vercel部署报错内容，示例：
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Failed to fetch data from WordPress GraphQL endpoint

排查与解决方案 #

1. 分页参数与查询校验 #

• 确认WPGraphQL的分页参数是否正确：WPGraphQL中分页常用first（每页数量）+after（游标）或offset，如果用offset，要确保查询中offset的递增逻辑正确，比如每次加载更多时是currentOffset + pageSize，而不是固定值
• 检查Queries.ts中的查询字段是否完整，比如是否请求了posts.edges和pageInfo.hasNextPage，避免因返回数据结构缺失导致报错
• 测试GraphQL查询：直接在WordPress的GraphQL playground（比如your-site.com/graphql）中执行分页查询，验证参数是否能返回正确数据

2. 前端状态管理问题 #

• 检查LoadMore组件中合并数据的逻辑：确保是[...currentPosts, ...newPosts]，而不是直接覆盖currentPosts
• 添加加载状态锁：避免重复点击导致的多次请求，比如在handleLoadMore开头判断isLoading，如果为true则直接返回
• 处理空数据情况：如果请求返回的posts.edges为空，要提示用户没有更多内容，同时禁用加载按钮

3. Vercel部署问题 #

• 环境变量配置：确认Vercel项目中已添加NEXT_PUBLIC_WP_GRAPHQL_ENDPOINT等必要环境变量，并且值正确（注意是否带https://）
• 接口访问权限：检查WordPress的GraphQL接口是否允许公网访问，是否有防火墙或插件限制了Vercel服务器的请求
• 静态生成兼容：如果使用Next.js SSG（静态站点生成），确保分页查询在构建时能获取到默认数据，或者改用ISR（增量静态再生）避免构建时的请求失败

4. 错误捕获与调试 #

• 在GraphQL请求的catch块中打印完整错误信息，包括error.response或error.message，定位是请求失败还是数据解析错误
• 查看Vercel的函数日志：部署后在Vercel控制台的「Functions」或「Logs」中查看详细错误栈，确认是构建阶段还是运行时的问题

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