React+GraphQL项目RemoveUser Mutation报400错误求助排查

问题背景 #

项目使用React + Apollo Client + express-graphql开发，CreateUser Mutation功能正常，但RemoveUser Mutation触发后返回400状态码的服务器错误，以下是代码问题排查及修复方案：

后端代码问题修复 #

1. Resolve函数参数签名错误 #

RemoveUser的resolve函数参数缺失，GraphQL resolve函数标准签名为resolve(parent, args, context, info)，原代码只接收args会导致参数解析错误：

// 错误写法
resolve(args) { ... }

// 正确写法
resolve(parent, args) { ... }

2. 用户查找逻辑错误 #

直接通过数组索引userData[args.id]匹配用户ID会出错（数组索引从0开始，而用户ID通常从1开始），应使用find方法精准匹配：

// 错误写法
if(userData[args.id].email === args.email && userData[args.id].password === args.password ){ ... }

// 正确写法
const targetUser = userData.find(user => user.id === args.id);
if (!targetUser) {
  console.log("用户不存在");
  return args;
}
if(targetUser.email === args.email && targetUser.password === args.password ){ ... }

3. 数组元素删除方式错误 #

delete userData[args.id]仅会将数组对应位置设为undefined，不会真正移除元素，应使用filter生成新数组：

// 错误写法
delete userData[args.id]

// 正确写法
userData = userData.filter(user => user.id !== args.id);

客户端代码问题修复 #

1. GraphQL变量类型错误 #

GraphQL标量类型中没有Number，应使用Int类型定义ID变量：

// 错误写法
mutation removeUser(
  $id:Number!
  $email: String!
  $password: String!
){ ... }

// 正确写法
mutation removeUser(
  $id:Int!
  $email: String!
  $password: String!
){ ... }

2. useState初始值错误 #

ID的初始值不应设为Number构造函数，应设为数字或空字符串：

// 错误写法
const [id, setId] = useState(Number);

// 正确写法
const [id, setId] = useState("");

3. ID参数类型转换 #

输入框返回的是字符串类型，需转为数字后传给后端：

removeUser({
  variables: {
    id: parseInt(id, 10), // 转为整数
    email: email,
    password: password,
  },
});

4. 异步错误处理修正 #

useMutation的error是异步更新的，直接在调用后判断无法捕获错误，应使用onError回调：

const [removeUser] = useMutation(REMOVE_USER_MUTATION, {
  onError: (err) => {
    console.log(err);
  }
});

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