Reactjs react js的数据传递问题GraphQL存在问题

这是我的登录组件，由ReactJS使用TypeScript制作。我对GraphQL有点陌生。有人能帮我把这件事弄清楚吗。 由于服务器上的“变量”$data“未定义”，我收到了错误

interface SignInInput {
    email: string;
    password: string;
}

interface SignInResponse {
    signIn: {
        token: string;
    }
}

const SignInInputInitValues: SignInInput = {
    email: "",
    password: "",
};

const MUTATIONS = gql
    `mutation {
        loginClinician(data: $data) {
            token
            data {
                id
                firstName
            }
        }
    }`;

const SignIn: FunctionComponent = () => {

    const setToken = tokenStore(state => state.setToken);
    const [ signIn, { loading }] = useMutation<SignInResponse, { data: SignInInput }>(MUTATIONS);

    const validate = (values): FormikErrors<SignInInput> => {
        const errors: FormikErrors<SignInInput> = {};
        if (!values.email) {
            errors.email = "Required";
        } else if (!emailRegex.test(values.email)) {
            errors.email = "Invalid Email Address";
        }
        if (!values.password) {
            errors.password = "Required";
        }
        if (values.password && values.password.length < 6) {
            errors.password = "Your password should have at least 6 characters";
        }
        return errors;
    };

    const submitForm = async(credentials: SignInInput) => {
        console.log(credentials)
        try {
            const { data } = await signIn({ variables: { data: credentials }});
            setToken(data.signIn.token);
        } catch (e) {
            e.graphQLErrors.forEach((error) => {
                message.error(error.message, 3);
            });
        }
    };
return (
            <div className="container">
                <div className="card login__common--card">
                    <div className="text__center">
                        <img src={Logo} />
                    </div>
                    <h3 className="heading-section">Log In</h3>
                    <Formik
                        initialValues={SignInInputInitValues}
                        validate={validate}
                        onSubmit={submitForm}
                    >
                        {({
                            values,
                            errors,
                            handleChange,
                            handleSubmit,
                        }) => (
                            <Form 
                                colon={false}
                                layout="vertical"
                                onFinish={handleSubmit}                             
                            >
                                <Form.Item
                                    label="Admin's ID"
                                    help={errors.email}
                                    validateStatus={errors.email ? "error" : ""}
                                >
                                    <Input
                                        size={SIZE}
                                        name="email"
                                        value={values.email}
                                        onChange={handleChange}
                                    />
                                </Form.Item>
                                <Form.Item
                                    label="Password"
                                    help={errors.password}
                                    validateStatus={errors.password ? "error" : ""}
                                >
                                    <Input.Password 
                                        name="password"
                                        value={values.password}
                                        onChange={handleChange}
                                        type="password"
                                        size={SIZE}
                                    />
                                </Form.Item>
                                <Form.Item colon={false}>
                                    <Row>
                                        <Button
                                            type="primary"
                                            htmlType="submit"
                                            loading={loading}
                                            size={SIZE}
                                            block
                                            className="auth__common--btn"
                                        >
                                            Log In
                                        </Button>
                                    </Row>
                                </Form.Item>
                                <div className="text__center">
                                    Forgot password?{" "}
                                    <Link to="/forgot-password">Reset Here</Link>
                                </div>
                            </Form>
                        )}
                    </Formik>
                </div>
            </div>
    );
};

export default SignIn;

接口信号输入{
电子邮件：字符串；
密码：字符串；
}
接口信号应答{
签名：{
令牌：字符串；
}
}
常量SIGNINPUTINTVALUES:SIGNINPUT={
电邮：“，
密码：“”，
};
常量突变=gql
`突变{
loginClinician（数据：$data）{
代币
资料{
身份证件
名字
}
}
}`;
const SignIn:FunctionComponent=（）=>{
const setToken=tokenStore（state=>state.setToken）；
const[signIn，{loading}]=使用突变（突变）；
const validate=（值）：formickerors=>{
常量错误：formickerors={}；
如果（！values.email）{
errors.email=“必需”；
}否则如果（！emailRegex.test（values.email））{
errors.email=“无效的电子邮件地址”；
}
如果（！values.password）{
errors.password=“必需”；
}
if（values.password&&values.password.length<6）{
errors.password=“您的密码应至少包含6个字符”；
}
返回错误；
};
const submitForm=async（凭据：signinput）=>{
console.log（凭据）
试一试{
const{data}=await-signIn（{variables:{data:credentials}}）；
setToken（数据签名令牌）；
}捕获（e）{
e、 graphQLErrors.forEach（（错误）=>{
message.error（error.message，3）；
});
}
};
返回(
登录
{({
价值观
错误，
handleChange，
手推，
}) => (
登录
忘记密码了？{“”}
在这里重置
)}
);
};
导出默认签名；

---

我不知道如何将数据传递给我的变异。如果有人能帮我解决这个问题，那将非常有帮助。

您需要在gql的开头定义变量。因此，您需要将gql修改为如下内容：

const MUTATIONS = gql
`mutation($data: SignInInput!) {
    loginClinician(data:$data) {
        token
        data {
            id
            firstName
        }
    }
}`;

---

定义-

数据

从API文档读取的类型。。。使用变量在操场中测试查询<代码>凭证，如果记录正确（？），必须匹配

数据

道具结构-检查网络请求，并与Formik文档中的请求进行比较：

onSubmit={（值、操作）…

…然后提交处理程序使用

值

道具获取对象…然后

变量：{数据：{email:values.email…

…但它仍然取决于API变异规范（仍然未知！！）…单独的问题，请先使用Playerd！！！如果您已经在后端的graphql架构中定义了SignInInput输入。如果没有，您需要这样做，或者可能需要将参数更改为

（email:String！password:String！）