Problem with data passing issue GraphQL with react js

Question

This is my login component made by ReactJS with TypeScript. I am bit new to GraphQL. Can someone please help me to sort out this. I am getting the error as "Variable "$data" is not defined" from the server.

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;

Not sure how I can pass data to my mutation. If someone can help me to sort this out that would be really helpful.

define graphql.org/learn/queries/#variables - data type read from API docs ... test query in playground using variables ... credentials, if logged properly (???), must match data props structure - check network request, compare with playground request — xadm
– xadm, Commented Apr 27, 2021 at 8:00
from Formik's docs: onSubmit={(values, actions)... ... then your submit handler gets object with values prop ... then variables:{ data: { email: values.email ... ... but it still depends on API mutation specs (still not known!!) ... separate problems, use playground first!!! — xadm
– xadm, Commented Apr 27, 2021 at 8:23

Justin · Accepted Answer · 2021-04-27 08:05:20Z

1

You need to define the variables at the beginning of the gql. So yould would need to modify your gql to sth. like this:

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

edited Apr 27, 2021 at 8:05

answered Apr 27, 2021 at 7:38

Justin

4265 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Justin Over a year ago

given you have defined a SignInInput input in the graphql schema on the backend. If not you need to do that or maybe change parameters to (email: String! password: String!)

Collectives™ on Stack Overflow

Problem with data passing issue GraphQL with react js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related