Cannot query graphql endpoint using Apollo from Angular

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!

Continue reading...