在 angular 中进行突变调用（获取“http://localhost:8080/graphql 的 Http 失败响应：400 错误请求”）

问：

我是 GraphQL 和 angular 的新手，我试图遵循文档但无法进行突变。 以下是ts文件代码

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);
        }
      );
  }
}

下面是html文件代码

<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>

以下是我用于用户解析器的 nestjs 代码，我在其中定义了突变

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);
  }
}

我已经按照文档进行了操作，但不知道为什么我收到此错误（“http://localhost:8080/graphql 的 Http 失败响应：400 错误请求”），请帮助我解决这个问题。

下面是 userInput 的输入类型

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

  @Field()
  name: string;

  @Field()
  password: string;

  @Field()
  email: string;
}