React前端Apollo Client调用GraphQL无法获取页面详情

前端Apollo Client初始化配置存在核心错误：你已经创建了指向/graphql接口的httpLink实例，但配置客户端时整行link属性被注释，导致客户端既没有绑定请求链路，也没有直接声明接口地址，GraphQL请求根本没有正确发送到后端服务，因此data始终为undefined。

按以下步骤修改代码即可解决问题：

• 修正App.js中的Apollo Client初始化配置，传入已创建的httpLink，后续需要加鉴权中间件时再拼接authLink即可：

const client = new ApolloClient({
  link: httpLink, // 取消原注释，暂时直接传入httpLink
  cache: new InMemoryCache(),
});

• 给Home.js中的useQuery加上加载、错误状态捕获，方便后续排查问题，修改对应代码段：

const { loading, error, data } = useQuery(GET_SINGLE_PAGE, {
  variables: { pageTitle: pageTitle },
});

if (loading) return <div>页面加载中...</div>;
if (error) {
  console.error('GraphQL请求错误：', error);
  return <div>页面加载失败，请检查控制台报错</div>;
}

const page = data?.page;
console.log(page);

• 验证配置：修改完成后重启前端服务，打开浏览器控制台Network面板，筛选Fetch/XHR请求，确认存在发往/graphql的POST请求且状态码为200，返回数据结构和GraphQL Playground中查询结果一致即可。

注：你package.json中已经配置了代理把3000端口的请求转发到5000端口的后端服务，只要后端服务正常运行在5000端口，上述修改完成后即可正常获取页面数据。

内容的提问来源于stack exchange，提问作者Stephen Scott Moore