Error: Response not successful: Received status code 400 @apollo/client and GraphQl

Question

While trying to run a GraphQL mutation using apollo/client I am getting an error. I tried the same query from GraphQL playground and it worked fine. I also run a GraphQL query from my app, that also worked fine. I read here that the 400 error is related to query. I tried to find out the issue but failed.

The Error that I am getting:

Error: Response not successful: Received status code 400

Call Stack
new ApolloError
node_modules/@apollo/client/errors/index.js (26:0)

Here is my functional reactjs component:

import React from "react";
import { gql, useMutation } from "@apollo/client";
import Form from "./styles/form";

const SIGNUP_MUTATION = gql`
    mutation SIGNUP_MUTATION(
        $email: String!
        $password: String!
        $first_name: String!
    ) {
        singup(email: $email, password: $password, first_name: $first_name) {
            token
        }
    }
`;

function Signup() {
    let email, first_name, password;
    const [
        signup,
        { loading: mutationLoading, error: mutationError },
    ] = useMutation(SIGNUP_MUTATION);
    return (
        <div>
            <Form
                method="post"
                onSubmit={async (e) => {
                    e.preventDefault();
                
                    await signup({
                        variables: {
                            email: email.value,
                            password: password.value,
                            first_name: first_name.value,
                        },
                    });
                
                    email.value = "";
                    first_name.value = "";
                    password.value = "";
                }}
            >
                <fieldset>
                    <h2>Sign Up for An Account</h2>

                    <label htmlFor="email">
                        <input
                            type="email"
                            name="email"
                            placeholder="email"
                            ref={(value) => (email = value)}
                        ></input>
                    </label>
                    <label htmlFor="first_name">
                        <input
                            type="text"
                            name="first_name"
                            placeholder="first name"
                            ref={(value) => (first_name = value)}
                        ></input>
                    </label>
                    <label htmlFor="password">
                        <input
                            type="text"
                            name="password"
                            placeholder="password"
                            ref={(value) => (password = value)}
                        ></input>
                    </label>
                    <button type="submit">Sign Up!</button>
                    {mutationLoading && <p>Loading...</p>}
                    {mutationError && <p>Error :( Please try again</p>}
                </fieldset>
            </Form>
        </div>
    );
}


export default Signup;

Resolver function

Mutation: {
        signup: async (__, { email, password, first_name }) => {
            try {
                 // removed the code//
                return {
                    token,
                    user,
                };
            } catch (error) {
                throw new Error(error);
            }
        },

Defination

type Mutation {
    signup(email: String!, password: String!, first_name: String!): AuthPayload
    login(email: String!, password: String!): AuthPayload
}