Angular http.get assistance

Question

I have an api I'm trying to access. The example given to me by the api documentation works in my bash shell (git bash), but trying to build an application using Angular I can't get it to work.

When I paste this example given to me into git bash it works fine:

curl -v 'https://api.r8.beer/v1/api/graphql/' \
-H 'content-type: application/json' \
-H 'accept: application/json' \
-H 'x-api-key: <my-api-key>' \
--data-binary '{"query":"query {\n beer(id: 4934) {\n id\n name\n 
}\n}","variables":"{}","operationName":null}'

Here is what I have so far in my angular app's service, this gives me a 404 error:

getBeer(){
return this.http.get('https://api.r8.beer/v1/api/graphql/', {
headers:{
  'content-type': 'application/json', 
  'accept': 'application/json', 
  'x-api-key': '<my-api-key>'}
  });
 } 

Not sure where to put this part in the above code though, and if it was there would it prevent the 404 response:

--data-binary '{"query":"query {\n beer(id: 4934) {\n id\n name\n 
}\n}","variables":"{}","operationName":null}'

How close am I??

Answer 1

If you pass data to cUrl and specify a content-type, then you are doing a POST request

Try something like that

getBeer(){

    let data = {
        query:"{\n beer(id: 4934) {\n id\n name\n }\n}",
        variables:"{}",
        operationName:null
    };

    return this.http.post('https://api.r8.beer/v1/api/graphql/', data, {
    headers:{
       'x-api-key': '<my-api-key>'}
      });
 }