Im trying to connect my angular-Apollo Client to my graphql backend and I Keep getting a 405 error. My Server is hosted on localhost port 4000 and my Client is also on localhost (port 4200). For my client i used the Basic Setup as shown in the Apollo docs and made a few Adjustments to it. If I look at the request in the browser I can see that Apollo is using the Method Options. As far as I graphql Server doesnt support the Options method. So how can I get my client to use the get or post method or allow the Options method?
My client scrpit:
import {Component, OnInit} from '@angular/core';
import {Apollo} from 'apollo-angular';
import gql from 'graphql-tag';
@Component({
selector: 'app-patient',
template: `
<div *ngIf="loading">
Loading...
</div>
<div *ngIf="error">
Error :(
</div>
<div *ngIf="allPatients">
<div *ngFor="let patient of allPatients">
<p>{{patient.id}}</p>
</div>
</div>
`,
})
export class PatientComponent implements OnInit {
allPatients: any[];
loading = true;
error: any;
constructor(private apollo: Apollo) {}
ngOnInit() {
this.apollo
.watchQuery<any>({
query: gql`
{
allPatients {
id
}
}
`,
})
.valueChanges.subscribe(result => {
this.allPatients = result.data && result.data.allPatients;
this.loading = result.loading;
this.error = result.errors;
});
}
}
And here is my server scrpit file:
var express = require('express');
var graphqlHTTP = require('express-graphql');
var { buildSchema } = require('graphql');
// Construct a schema, using GraphQL schema language
var schema = buildSchema(`
type Patient {
id: String
}
type Query {
allPatients: [Patient]
}
`);
// The root provides a resolver function for each API endpoint
var root = {
allPatients: () => {
return [{id: "testID1"}, {id: "testID2"}];
},
};
var graphQLApp = express();
graphQLApp.use('/graphql', graphqlHTTP({
schema: schema,
rootValue: root,
graphiql: true,
}));
graphQLApp.listen(4000);
console.log('Running a GraphQL API server at http://localhost:4000/graphql');