Angular发送GraphQL POST请求返回400 Bad Request错误求助

开发Angular应用对接GraphQL服务时，未使用Apollo Client，直接基于HTTP POST封装查询语句发送到GraphQL服务端，请求持续返回400 Bad Request错误，且未返回任何错误响应对象。
涉及代码如下：

graphi.service.ts（原代码） #

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
providedIn: 'root',
})
export class GraphService {
constructor(private http: HttpClient) {}

 fetchTdmData(): Observable<any> {
    const endpoint = 'https://grahphqldemo-dit.r3.pcf.dell.com/graphql';
    const query = "{\n" +
    "bankAccount{\n" +
    "     name\n" +
    "     id\n" +
    "     currency\n" +
    "   }\n" +
    "}"
        return this.http.post(endpoint, query);
    }
}

graphi.component.ts（原代码） #

import { Component, OnInit } from '@angular/core';
import { GraphService } from './graphi.service';

@Component({
  selector: 'lib-graphi',
  templateUrl: './graphi.component.html',
  styleUrls: ['./graphi.component.css']
})
export class GraphiComponent implements OnInit {

constructor(private graphService: GraphService) { }

  ngOnInit(): void {
    this.graphService.fetchTdmData().subscribe((response: any) => {
      if(response) {
      console.log('graphl Ui success');
      console.log(response.data.bankAccount.name);
      console.log(response.data.bankAccount.id);
      console.log(response.data.bankAccount.currency);
  } else {
    console.log('graphql UI error');
  }
});
  }

}

• GraphQL 基于HTTP的POST请求默认要求请求体为包含query字段的JSON结构，原代码直接将查询字符串作为请求体发送，不符合接口规范，是触发400错误的核心原因
• 原请求未设置Content-Type: application/json请求头，服务端无法按JSON格式解析请求内容
• 原组件代码的错误处理逻辑无效：Angular HttpClient的400类错误响应会进入RxJS订阅的error回调，不会进入next回调，原代码在next回调里判断response是否存在的逻辑，根本捕获不到这类请求错误

修正后的graphi.service.ts #

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class GraphService {
  constructor(private http: HttpClient) {}

  fetchTdmData(): Observable<any> {
    const endpoint = 'https://grahphqldemo-dit.r3.pcf.dell.com/graphql';
    // 定义查询语句
    const query = `{
      bankAccount{
        name
        id
        currency
      }
    }`;
    // 按GraphQL规范包装请求体
    const requestBody = { query };
    // 设置正确的JSON请求头
    const headers = new HttpHeaders({
      'Content-Type': 'application/json'
    });

    return this.http.post(endpoint, requestBody, { headers });
  }
}

修正后的graphi.component.ts #

import { Component, OnInit } from '@angular/core';
import { GraphService } from './graphi.service';

@Component({
  selector: 'lib-graphi',
  templateUrl: './graphi.component.html',
  styleUrls: ['./graphi.component.css']
})
export class GraphiComponent implements OnInit {
  constructor(private graphService: GraphService) { }

  ngOnInit(): void {
    this.graphService.fetchTdmData().subscribe({
      next: (response: any) => {
        console.log('graphql UI success');
        console.log(response.data.bankAccount.name);
        console.log(response.data.bankAccount.id);
        console.log(response.data.bankAccount.currency);
      },
      error: (error) => {
        // 400等HTTP错误会进入该回调
        console.error('graphql UI error', error);
      }
    });
  }
}

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