Apollo Client v3.0.0创建用户时BAD_USER_INPUT错误及相关问题

问题2：是否需要在onCompleted中调用GET_ALL_USERS查询？ #

不是必须的，这只是更新数据的一种方案：

• 若业务场景简单，用refetch重新拉取全量用户数据是最省心的选择，代码成本低。
• 若追求性能、避免重复请求，更推荐用Apollo Client的缓存更新机制（即useMutation的update选项）直接修改缓存，无需重新发起查询。

问题3：基于现有代码，创建用户后如何更新UI？ #

有两种常用实现方案：

方案1：沿用现有refetch逻辑（简单直接）

当前代码已在onCompleted中调用refetch()，这会重新执行GET_ALL_USERS查询，自动更新用户列表UI。建议补充关闭模态框的逻辑：

onCompleted: (data) => {
  refetch();
  onClose(); // 新增：创建成功后关闭弹窗
}

方案2：用update选项直接更新缓存（性能更优）

通过update函数手动修改Apollo缓存中的GET_ALL_USERS数据，将新创建的用户添加进去，无需发起新请求：

const [register, { error, loading }] = useMutation(REGISTER_USER, {
  update(cache, { data: { registerUser } }) {
    // 读取缓存中已有的用户列表
    const existingUsers = cache.readQuery({ query: GET_ALL_USERS })?.getAllUsers || [];
    // 写入新的用户列表（追加新用户）
    cache.writeQuery({
      query: GET_ALL_USERS,
      data: { getAllUsers: [...existingUsers, registerUser] }
    });
  },
  onCompleted: () => {
    onClose(); // 创建成功后关闭弹窗
  },
  onError: (err) => {
    console.error(JSON.stringify(err, null, 2));
  }
})

这种方式不会重复请求后端，UI更新更快，适合对性能有要求的场景。

内容的提问来源于stack exchange，提问作者github.arief