数据传递问题 GraphQL 与 React js

Question

这是我用 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;

不确定如何将数据传递给我的突变。如果有人可以帮我解决这个问题，那将非常有帮助。

Answer 1

你需要在gql开头定义变量。所以你需要将你的 gql 修改为 sth。像这样：

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

数据传递问题 GraphQL 与 React js

Problem with data passing issue GraphQL with react js

reactjs

graphql

formik