Make a mutation call in angular (getting "Http failure response for http://localhost:8080/graphql: 400 Bad Request")

Im new to both GraphQL and angular im trying to follow the documentation but not able to make a mutation. Below is the ts file code

export const USER_SIGNUP = gql`
  mutation AddUser($userInput: UserInput) {
    addUser(userInput: $userInput) {
      id
      name
      email
      password
    }
  }
`;

import { Component } from '@angular/core';
import { Apollo } from 'apollo-angular';
import { USER_SIGNUP } from 'src/app/graphql/user';

@Component({
  selector: 'app-sign-up',
  templateUrl: './sign-up.component.html',
  styleUrls: ['./sign-up.component.scss'],
})
export class SignUpComponent {

  constructor(private apollo: Apollo) {}

  userSignUp() {
    this.apollo
      .mutate({
        mutation: USER_SIGNUP,
        variables: {
          userInput: {
            name: 'YRT',
            email: 'RTRT',
            password: '1542',
          },
        },
      })
      .subscribe(
        (data) => {
          console.log(data);
        },
        (err) => {
          console.log(err.message);
        }
      );
  }
}

And below is the html file code

<div class="sign-up-main-container">
  <div>
    <app-auth-bg-component></app-auth-bg-component>
  </div>
  <form (ngSubmit)="userSignUp()" class="sign-up-form">
    <div>
      <label>Name</label>
      <div class="sign-up-input-cont">
        <input type="text" placeholder="Enter your name." />
      </div>
    </div>
    <div>
      <label>Email</label>
      <div class="sign-up-input-cont">
        <input type="text" placeholder="Enter your email." />
      </div>
    </div>
    <div>
      <label>Password</label>
      <div class="sign-up-input-cont">
        <input [type]="passwordType" placeholder="Enter your password." />
      </div>
    </div>
    </div>
    <button type="submit">Signup</button>
  </form>
</div>

The below is my nestjs code for user resolver where i have defined the mutation

import { Resolver, Query, Mutation, Args } from '@nestjs/graphql';
import { UserService } from './user.service';
import { User, UserInput } from './users.model';

@Resolver()
export class UserResolver {
  constructor(public userService: UserService) {}

  @Query(() => String)
  hello() {
    return 'hello';
  }

  @Mutation(() => User)
  addUser(@Args('userInput') userInput: UserInput) {
    return this.userService.addUser(userInput);
  }
}

I have followed the documentation but dont know why im getting this error ("Http failure response for http://localhost:8080/graphql: 400 Bad Request") please help me with this.

Below is the input type of userInput

@InputType()
export class UserInput {
  @Field({ nullable: true })
  id: string;

  @Field()
  name: string;

  @Field()
  password: string;

  @Field()
  email: string;
}

While defining the mutation i had to use the "!" mark like below.

export const USER_SIGNUP = gql`
  mutation AddUser($userInput: UserInput!) {
    addUser(userInput: $userInput) {
      id
      name
      email
      password
    }
  }
`;

Don't know what is the importance of "!" here but added that and it worked, if any of you know why we had to use that please tell me. Thank you.