Problem with data passing issue GraphQL with react js - reactjs

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.

Answer 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
}
}
}`;