使用Apollo Client执行SignUp Mutation时出现400错误求助

我在使用React.js作为前端框架、Apollo Client调用API的用户注册流程中，执行signUp mutation时遇到了400错误。

我的SignUp.js代码： #

import React, { useEffect, useState } from 'react';
import { useMutation, useApolloClient, gql } from '@apollo/client';
import styled from 'styled-components';

import Button from '../components/Button';

const Wrapper = styled.div`
    border: 1px solid #f5f4f0;
    max-width: 500px;
    padding: 1em;
    margin: 0 auto;
`;

const Form = styled.form`
label,
input {
    display: block;
    line-height: 2em;
}

input {
    width: 100%;
    margin-bottom: 1em;
}
`;

const SIGNUP_USER = gql`
  mutation signUp($email: String!, $username: String!, $password: String!) {
    signUp(email: $email, username: $username, password: $password)
  }
`;

const SignUp = (props) => {
const [values, setValues] = useState();

const onChange = (event) => {
    setValues({
        ...values,
        [event.target.name]: event.target.value
    })
}

useEffect(() => {
    document.title = 'Sign Up - Notedly';
});

const [signUp, { loading, error }] = useMutation(SIGNUP_USER, {
    onCompleted: data => {
        console.log(data.signUp);
    }
});

return (
    <Wrapper>
        <h2>Sign Up</h2>
        <Form
            onSubmit={event => {
            event.preventDefault();
            signUp({
                    variables: {
                      ...values
                    }
                  });
                }}
              >
            <label htmlFor="username">Username : </label>
            <input type="text" name="username" id="Username" placeholder="username" required/>
            <label htmlFor="email">Email : </label>
            <input type="email" name="email" id="email" placeholder="Email" required/>
            <label htmlFor="username">Password : </label>
            <input type="password" name="password" id="password" placeholder="Password" required/>
            <button type="submit">Submit</button>
        </Form>
    </Wrapper>
)
};

export default SignUp;

错误截图： #

我尝试查阅相关文档仍未找到解决办法，希望能得到帮助，谢谢。

问题排查方向： #

• State初始化缺失：useState()未设置初始值，第一次输入时展开...values会得到undefined，导致传递给mutation的变量不完整，触发后端参数校验失败返回400，需初始化为{ username: '', email: '', password: '' }。
• Styled组件语法错误：Form的styled定义缺少闭合}，会导致组件渲染异常，间接影响表单提交逻辑。
• 表单label关联错误：密码输入框的labelhtmlFor属性错误指向username，虽不直接导致400，但不符合语义规范，需改为password。
• 后端参数校验失败：400错误通常对应请求参数不符合后端要求（如密码长度不足、邮箱格式非法、用户名已存在等），可通过浏览器Network面板查看请求详情，获取后端返回的具体错误信息。
• Apollo Client配置问题：检查Client的uri是否正确指向后端API，是否存在跨域配置错误或请求头设置异常。

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