Cannot query graphql endpoint using Apollo from Angular

Question

I am using Angular 15 and am trying to query a GraphQL endpoint using Apollo. I ran ng add apollo-angular that took care of all dependencies and imports, specified the uri of the endpoint and the correct version of the GraphQL, but I am always getting 400 Bad Request when trying to query.

I tried running the same query on their studio site (studio.apollographql.com), connected to the local graphql server, and it works flawlessly.

This is the query that works in the studio:

query test($limit: Int, $offset: Int){
  Cryptocurrency_GET(limit: $limit, offset: $offset) {
    _id
    _type
  }
}

This is how I use it in GraphQL Playground:

  Cryptocurrency_GET(limit: 10, offset: 0) {
    _id
    _type
  }

And this is how I'm trying to access it from Angular:

return this.apollo.watchQuery({
  query: gql`
    query test($limit: Int, $offset: Int){
      Cryptocurrency_GET(limit: $limit, offset: $offset) {
        _id
        _type
      }
    }
  `,
  variables: {
    limit: 10,
    offset: 0
  }
})
.valueChanges.subscribe(({data}) => {
  console.log(data.test)
});

These are my (relevant) dependencies:

"dependencies": {
  "@angular/cdk": "^15.1.1",
  "@angular/common": "^15.1.0",
  "@angular/compiler": "^15.1.0",
  "@angular/core": "^15.1.0",
  "@angular/forms": "^15.1.0",
  "@angular/material": "^15.1.1",
  "@angular/platform-browser": "^15.1.0",
  "@angular/platform-browser-dynamic": "^15.1.0",
  "@angular/router": "^15.1.0",
  "apollo-angular": "^4.2.0",
  "chart.js": "^4.2.0",
  "graphql": "^15.8.0",
  "graphql-tag": "^2.12.6",
  "rxjs": "~7.8.0",
  "tslib": "^2.3.0",
  "zone.js": "~0.12.0",
  "@apollo/client": "^3.0.0"
}

If any extra information is needed, please ask.

Thank you very much!

Answer 1

A little bit of digging, and I found the answer: Apollo is adding a __typename to the query. Simply specify addTypename: false in the inMemoryCache config like this:

cache: new InMemoryCache({
      addTypename: false,
    }),