React+GraphQL创建用户Mutation时出现Error 400的问题求助

核心问题梳理 #

• Mutation 变量格式不匹配：REGISTER_USER 要求传入 input 对象，但调用时直接传递零散字段，未包装成指定结构
• 表单字段映射错误：前端 state 字段名与 GraphQL 的 RegisterInput 字段名不一致（如fullname vs full_name、groupid vs group_id）
• 下拉选择框未绑定 name 属性：选择角色时无法更新对应 state
• 模态框 show 属性传值错误：传递函数而非布尔状态值
• 重复调用 useQuery：造成不必要的请求与状态混乱

分步修复代码 #

1. 修正模态框渲染逻辑 #

在 PengaturanPengguna 组件中，ModalCreate 的 show 属性需传入布尔状态而非函数，同时移除冗余的三元判断：

// 原代码
{ showModal ? <ModalCreate show={handleShowModal} onClose={handleCloseModal} action={registerUser} /> : null }

// 修改后
<ModalCreate show={showModal} onClose={handleCloseModal} action={registerUser} />

2. 对齐表单字段与 GraphQL 定义 #

在 ModalCreate 组件中，调整 state 字段名与 GraphQL 一致，同时给下拉框绑定 name 属性：

// 修正 state 字段名
const [value, setValue] = useState({ 
    username: props.username || '', 
    email: props.email || '', 
    full_name: props.full_name || '', // 改为 full_name
    password: props.password || '', 
    phone: props.phone || '', 
    address: props.address || '', 
    group_id: props.group_id || '', // 改为 group_id
});

// 修正下拉选择框的 name 属性与值
<Form.Select 
    aria-label="pilih user role" 
    name="group_id"
    value={value.group_id} 
    onChange={onChange}
>
    <option value="superadmin">Super Admin</option>
    <option value="admin">Admin</option>
    <option value="admin_rj">Admin RJ</option> {/* 移除选项值的多余空格 */}
</Form.Select>

// 修正姓名输入框的 name 属性
<Form.Control name="full_name" value={value.full_name} onChange={onChange}/>

3. 修正 Mutation 变量传递格式 #

在 ModalCreate 的表单提交函数中，将字段包装成 input 对象：

// 原提交逻辑
props.action({
    variables: {
        ...value
    }
})

// 修改后
props.action({
    variables: {
        input: {
            ...value
        }
    }
})

4. 优化 Mutation 回调与重复请求 #

在 PengaturanPengguna 组件中，修复重复 useQuery 调用，添加成功提示与模态框关闭逻辑：

// 保留单个 useQuery 调用，获取 refetch 方法
const { data: usersdata, loading: usersloading, error: userserror, refetch } = useQuery(GET_ALL_USERS);

// 修正 Mutation 配置
const [registerUser, { loading: registerloading, error: registererror }] = useMutation(REGISTER_USER, {
    refetchQueries: [{ query: GET_ALL_USERS }], // 移除无参数的 GET_USER_BY_ID 请求
    onCompleted: data => {
        handleCloseModal(); // 成功后关闭模态框
        alert("用户创建成功！"); // 替换为 Toast 组件可提升体验
    },
    onError: err => {
        console.error(err);
        alert(`创建失败：${err.message}`);
    }
});

5. 移除冗余的 useEffect（可选） #

react-bootstrap 的 Modal 组件会自动管理 modal-open 类，可删除 ModalCreate 中的相关 useEffect：

// 删除这段代码
useEffect(() => {
    if (props.show) {
        document.body.classList.add("modal-open");
    }

    return () => {
        if (document.body.classList.contains("modal-open")) {
            document.body.classList.remove("modal-open");
        }
    };
}, [props.show]);

额外检查项 #

• 确认后端 RegisterInput 的必填字段，确保表单已收集所有必填项（如 password）
• 检查网络请求的 payload，确认字段名与值完全符合后端要求

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