Angular调用GraphQL Mutation报400 Bad Request错误求助

以下是针对你遇到的问题的具体排查步骤和修复建议：

1. 先获取详细错误信息 #

当前代码仅打印了错误消息，无法看到后端返回的具体GraphQL错误细节。修改Angular组件的错误回调，打印完整错误对象：

.subscribe(
  (data) => {
    console.log(data);
  },
  (err) => {
    console.log('完整错误对象:', err);
    console.log('GraphQL 错误详情:', err.graphQLErrors);
    console.log('网络错误详情:', err.networkError);
    console.log(err.message);
  }
);

通过这些日志能快速定位是请求格式问题、Schema不匹配还是后端逻辑错误。

2. 校验Apollo Client基础配置 #

确保Angular项目的app.module.ts中正确配置了Apollo客户端，指向正确的GraphQL端点：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { ApolloModule, APOLLO_OPTIONS } from 'apollo-angular';
import { HttpLink } from 'apollo-angular/http';
import { InMemoryCache } from '@apollo/client/core';

@NgModule({
  imports: [BrowserModule, HttpClientModule, ApolloModule],
  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: (httpLink: HttpLink) => {
        return {
          cache: new InMemoryCache(),
          link: httpLink.create({
            uri: 'http://localhost:8080/graphql', // 确认端点与后端一致
          }),
        };
      },
      deps: [HttpLink],
    },
  ],
})
export class AppModule {}

3. 用GraphQL Playground验证后端可用性 #

打开NestJS默认提供的Playground（http://localhost:8080/graphql），手动执行Mutation测试：

测试Query #

mutation AddUser($userInput: UserInput!) {
  addUser(userInput: $userInput) {
    id
    name
    email
    password
  }
}

测试变量 #

{
  "userInput": {
    "name": "YRT",
    "email": "test@example.com",
    "password": "1542"
  }
}

• 如果Playground执行成功：说明后端逻辑正常，问题出在Angular客户端
• 如果Playground执行失败：说明后端Schema或Resolver存在问题，比如UserInput未被正确扫描、字段校验不通过等

4. 检查NestJS后端配置 #

确保GraphQL模块正确配置 #

在app.module.ts中确认开启了code-first模式并自动生成Schema：

import { Module } from '@nestjs/common';
import { GraphQLModule } from '@nestjs/graphql';
import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo';
import { UserModule } from './user/user.module';

@Module({
  imports: [
    GraphQLModule.forRoot<ApolloDriverConfig>({
      driver: ApolloDriver,
      autoSchemaFile: true, // 自动扫描并生成Schema
      playground: true,
    }),
    UserModule,
  ],
})
export class AppModule {}

配置CORS允许Angular跨域请求 #

在main.ts中添加CORS配置，避免跨域导致的请求被拦截：

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors({
    origin: 'http://localhost:4200', // Angular项目的运行地址
    credentials: true,
  });
  await app.listen(8080);
}
bootstrap();

5. 修复表单数据绑定（当前硬编码可用，后续需优化） #

当前代码中userSignUp使用硬编码参数，但实际场景需要绑定用户输入。示例使用ngModel实现：

1. 在组件所在模块导入FormsModule
2. 修改组件TS代码：

export class SignUpComponent {
  passwordType = 'password';
  userData = { name: '', email: '', password: '' };

  constructor(private apollo: Apollo) {}

  userSignUp() {
    this.apollo
      .mutate({
        mutation: USER_SIGNUP,
        variables: {
          userInput: this.userData,
        },
      })
      .subscribe(...);
  }
}

3. 修改HTML输入框：

<input type="text" placeholder="Enter your name." [(ngModel)]="userData.name" />
<input type="text" placeholder="Enter your email." [(ngModel)]="userData.email" />
<input [type]="passwordType" placeholder="Enter your password." [(ngModel)]="userData.password" />

内容的提问来源于stack exchange，提问作者Gagan