Graphql POST call gives 400 bad request error

Question

Need help with the graphql code. Attached are the code of service and component files. As I just started with graphql, I'm not using the apollo client, instead just mounting a query on top of the HTTP POST call and sending a request to the graphql server. Also, I am receiving a 400 bad request error without any error response object.

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

}

Answer 1

It seems you are missing a wrapper in the request body. Each GraphQL request should be wrapped in either query or mutation attributes. Naming the body query is not enough :)

I guess the body should look like this:

const query = {
  query: `{
    bankAccount{
      name
      id
      currency
    }
  }`,
};