Angular Apollo client returning bad request

Question

I'm practicing Graphql & Apollo Client for Angular.

I'm having issues in creating queries from client side.

I've successfully created graphql queries in backend.

Below is my GQL Query which returns data and it's displayed in Playground

GQL Query

{
  getData {
    data {
      type
    }
}

My Client side code,

Service.ts

export class ContentService {
  constructor(    private apollo: Apollo,
    ) {
      this.getContent();
    }

   async getContent(): Promise<any> {
    const response: any = await this.apollo.query({query: getContentQuery}).toPromise();
    return console.log(response);
  }
}

Please tell me what I'm doing wrong over here.

Unable to find the solutions answer. Please help.

JV Lobo JV Lobo · Accepted Answer · 2019-02-01T23:15:22

So, this is your query in client side:

import gql from 'graphql-tag';

export const getContentQuery = gql`
  query getContent {
    metadata {
      type
    }
  }

The query getContent is the name you are giving to your query in your code, but it's not the actual "query name" to send to your backend. I think you have to do something like:

import gql from 'graphql-tag';

export const getContentQuery = gql`
  query getContent {
    getContent {
      metadata {
        type
      }
    }
  }

Angular Apollo client returning bad request

1 Answers