运行freeCodeCamp GraphQL教程项目出现getPosts与extensions读取报错

这两个报错的核心原因都是前端Apollo Client发起请求后没有正确接收到可用的服务端返回值，可按照以下顺序排查：

1. 确认后端服务是否正常启动 #

• 该项目是前后端分离的MERN项目，必须先启动后端服务再启动前端，不能只运行前端
• 进入项目的server文件夹，先执行npm install安装后端依赖，再执行npm start启动服务，确认终端没有报错，且服务默认运行在http://localhost:5000
• 打开浏览器访问http://localhost:5000/graphql，确认GraphQL Playground可以正常打开，说明后端服务运行正常

2. 检查Apollo Client的服务端地址配置 #

• 打开前端代码里的Apollo Client初始化文件（一般是src/ApolloProvider.js或者src/App.js里的配置段）
• 确认uri参数值是http://localhost:5000/graphql，和后端服务地址完全一致，没有拼写错误、端口错误
• 如果是修改过后端端口，要同步修改这个配置值

3. 排查getPosts相关报错 #

• 这个报错说明你调用useQuery获取帖子列表后，返回的data对象为undefined，直接访问data.getPosts就会触发报错
• 在调用getPosts的组件里先加判断逻辑：只有data存在的时候才访问data.getPosts，示例代码如下：

const { loading, data } = useQuery(FETCH_POSTS_QUERY);
if (loading) return <p>加载中...</p>
// 先判断data是否存在
const posts = data ? data.getPosts : [];

• 同时确认你定义的FETCH_POSTS_QUERY查询语句的字段名、返回值结构和后端schema定义完全一致，没有拼写错误

4. 排查登录注册页extensions相关报错 #

• 这个报错是Apollo Client处理错误响应的时候，没有拿到预期的graphQLErrors对象，直接访问extensions字段导致
• 找到你封装的登录/注册mutation的错误处理逻辑，修改为逐层判断字段存在再访问，示例代码如下：

const [loginUser, { loading, error }] = useMutation(LOGIN_USER_MUTATION, {
  update(_, result) {
    // 登录成功逻辑
  },
  onError(err) {
    // 先逐层判断字段存在再取值
    const errors = err?.graphQLErrors?.[0]?.extensions?.errors || {};
    console.log(errors)
  }
})

• 同时检查后端的用户验证逻辑、错误返回格式是否符合预期，有没有在跨域配置里漏加前端地址导致CORS拦截，后端默认的CORS配置要允许http://localhost:3000的请求

5. 克隆仓库后仍报错的补充检查 #

• 确认你已经在server文件夹下新建了.env文件，配置了正确的MONGO_URI（你的MongoDB连接地址）和JWT_SECRET（自定义的加密字符串），这两个值缺失会导致后端服务启动失败但无明显报错
• 确认你的本地MongoDB服务已经正常启动，如果你使用MongoDB Atlas，确认IP白名单已经添加了你的本地IP，允许连接

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