Next.js搭配WPGraphQL客户端渲染返回Undefined数据问题求助

问题根因及解决方案 #

1. 环境变量客户端不可访问（最高概率）

Next.js 中只有前缀为 NEXT_PUBLIC_ 的环境变量才能被客户端侧代码读取，你当前使用的 process.env.WP_API_URL、process.env.WP_AUTHORIZATION 仅能在服务端执行的 getStaticProps/getServerSideProps 中拿到值，客户端渲染时这两个值都是 undefined，导致请求地址无效、权限校验失败，自然拿不到数据。
解决方法：

• 若查询的是 WPGraphQL 公开的已发布内容，先移除 Apollo Client 配置中的 authorization 头，WPGraphQL 默认不需要授权即可查询公开内容，避免敏感信息暴露到前端。
• 将 .env 文件中的 WP_API_URL 重命名为 NEXT_PUBLIC_WP_API_URL，同步修改 Apollo Client 配置中的引用。

2. Apollo Client 配置未适配 SSR 场景

你当前的 Apollo Client 没有区分服务端/客户端执行环境，容易出现 hydrate 状态不一致导致的请求异常。
修改 apollo-client.js 配置如下：

import { ApolloClient, InMemoryCache, createHttpLink } from "@apollo/client";

const httpLink = createHttpLink({
  uri: process.env.NEXT_PUBLIC_WP_API_URL,
});

const client = new ApolloClient({
  ssrMode: typeof window === 'undefined',
  link: httpLink,
  cache: new InMemoryCache(),
  // 排查阶段先禁用缓存，确认正常后可移除该配置
  defaultOptions: {
    watchQuery: {
      fetchPolicy: 'network-only',
    }
  }
});

export default client; 

3. 客户端组件未做渲染隔离

调用 Articles 组件时必须包裹你写的 ClientOnly 组件，避免预渲染阶段和客户端执行的状态冲突：

// 你在页面中调用 Articles 的位置改为如下写法
<ClientOnly>
  <Articles />
</ClientOnly>

排查技巧 #

打开浏览器开发者工具的「网络」面板，筛选 GraphQL 请求，查看请求是否正常发出、返回状态码、返回体内容，可快速定位是权限问题、参数问题还是地址错误。

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