Next.js+WordPress无头CMS使用Apollo Client实现分页报500错误求助

排查解决步骤 #

• 第一步：验证GraphQL查询本身正确性
  直接在浏览器打开你的WordPress GraphQL端点地址${process.env.NEXT_PUBLIC_WORDPRESS_NEXT_URL}/graphql，进入内置的查询面板，把你代码里的GET_NEWS查询语句和对应的变量uri: '/news/'、first: 你设置的PER_PAGE_FIRST值、after: null填入执行，查看是否有明确的语法错误、字段不存在、参数非法等报错，WPGraphQL会直接返回具体错误原因，这是定位500错误最快的方式。
• 第二步：确认环境变量有效性
  查看终端中你打印的GraphQL端点地址是否正确，确认process.env.NEXT_PUBLIC_WORDPRESS_NEXT_URL的值没有拼写错误、没有多余/缺失的斜杠，本地开发或部署环境是否正确加载了该环境变量。
• 第三步：补全Apollo Client请求配置
  你当前的createHttpLink没有配置凭证参数，如果你的WordPress站点开启了GraphQL访问权限限制，请求未携带Cookie会触发服务端错误，修改配置如下：

const link = createHttpLink({
    uri: `${process.env.NEXT_PUBLIC_WORDPRESS_NEXT_URL}/graphql`,
    credentials: 'include' // 新增这行，请求时携带站点凭证
})

• 第四步：检查参数合法性
  确认代码中PER_PAGE_FIRST常量已经正确定义，若该值为undefined，传递到WPGraphQL的非法first参数会触发服务端500错误。
• 第五步：查看WordPress服务端日志
  若以上步骤都未解决，查看WordPress的PHP错误日志、WPGraphQL插件日志，500错误必然会在服务端留下具体的错误原因，常见的包括WPGraphQL版本与WordPress版本不兼容、缺少分页所需的插件支持、数据库查询异常等。

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