使用MERNG+GraphQL遇TypeError：无法读取undefined的extensions属性求助

看起来你遇到的问题是在处理注册 mutation 的错误时，尝试访问了一个不存在的属性链。错误发生在 setErrors(err.graphQLErrors[0].extensions.exception.errors) 这一行，说明 err.graphQLErrors[0] 是 undefined，导致你无法继续访问它的 extensions 属性。

问题根源 #

Apollo Client 的 onError 回调接收的错误对象不一定总是包含 graphQLErrors 数组，或者该数组可能为空：

• 可能是网络错误（比如服务器没启动、跨域问题），此时错误会在 networkError 属性里，而不是 graphQLErrors
• 后端的 GraphQL Resolver 没有按照预期格式抛出错误，导致 graphQLErrors[0].extensions 不存在
• 错误结构和你预期的不一致，比如某些情况下 graphQLErrors 本身就是 undefined

解决方案 #

1. 先打印完整错误对象，排查实际结构

首先在 onError 里打印完整的错误对象，搞清楚错误到底存在哪里：

onError(err) {
  console.log("完整错误信息:", err);
  // 后续处理逻辑
}

运行代码后看控制台，你会看到错误的真实结构——是在 graphQLErrors 里，还是 networkError，或者其他属性。

2. 增加防御性错误处理

使用**可选链操作符（?.）**和条件判断，避免直接访问深层属性导致崩溃。修改你的 onError 逻辑：

onError(err) {
  // 处理 GraphQL 层面的错误
  if (err.graphQLErrors && err.graphQLErrors.length > 0) {
    const targetError = err.graphQLErrors[0];
    // 尝试获取后端返回的验证错误
    const formErrors = targetError.extensions?.exception?.errors;
    if (formErrors) {
      setErrors(formErrors);
    } else {
      // 如果没有预期的错误结构，显示通用错误
      setErrors({ general: targetError.message });
    }
  } 
  // 处理网络错误
  else if (err.networkError) {
    setErrors({ general: "网络连接失败，请检查服务器是否正常运行" });
  } 
  // 处理其他未知错误
  else {
    setErrors({ general: "注册失败，请稍后重试" });
  }
}

如果你的项目环境不支持可选链（?.），可以用嵌套的 if 判断替代：

const formErrors = targetError.extensions 
  && targetError.extensions.exception 
  && targetError.extensions.exception.errors;

3. 检查后端 Resolver 的错误抛出格式

确保你的后端注册 Resolver 正确抛出带有 extensions.exception.errors 结构的 GraphQL 错误。比如使用 Apollo Server 的话，应该这样抛出验证错误：

const { ApolloError } = require('apollo-server');

// 注册 Resolver
register: async (_, { RegisterInput }) => {
  // 验证用户名是否已存在等逻辑
  if (usernameExists) {
    throw new ApolloError("用户名已存在", "VALIDATION_ERROR", {
      exception: {
        errors: { username: "该用户名已被注册" }
      }
    });
  }
  // ... 其他逻辑
}

如果后端没有正确设置这个结构，前端自然拿不到对应的值。

4. 确认依赖版本兼容性

有时候 @apollo/react-hooks 和 graphql 的版本不匹配也会导致错误结构异常。尝试重新安装所有依赖：

rm -rf node_modules package-lock.json
npm install

额外提示 #

你代码里的 useMutation 有个小拼写错误：{ Loading } 应该是 { loading }（小写l），这个不影响当前错误，但会导致你无法正确使用加载状态：

const [addUser, { loading }] = useMutation(REGISTER_USER, {
  // ... 配置
})

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