I am writing a graphql server component on AWS Lambda (NOT using graphql-server). On the client side I\'m using apollo-client. On the response of the lambda function I\'m sett
I'd assume you're using the AWS API Gateway.
One question for you is: have you enabled CORS for your gateway? See how
I believe that should solve your issues, if you're also sending cookies, you can also set the "Access-Control-Allow-Credentials" : true
header as well.
`
To workaround the CORS issue with Apollo you have to pass the no-cors
option to the underlying fetch
.
import ApolloClient from "apollo-boost";
const client = new ApolloClient({
uri: "your client uri goes here",
fetchOptions: {
mode: 'no-cors',
},
});
This is not a specific Apollo problem, rather a configuration that is meant to be tackled on the fetch
side, see this for more information: https://developers.google.com/web/ilt/pwa/working-with-the-fetch-api#cross-origin_requests
I wonder why it does works with Axios for you, I'd expect you to have the no-cors
mode set somewhere.
here is a working example. the server must have CORS enabled. that means the origin of your http request
origin: https://example.com
must match the access-control-allow-origin header of the response to your request.
access-control-allow-origin: https://example.com
Then on the Angular client you can use this module:
import {NgModule} from '@angular/core';
import {ApolloModule, APOLLO_OPTIONS} from 'apollo-angular';
import {HttpLinkModule, HttpLink} from 'apollo-angular-link-http';
import {InMemoryCache} from 'apollo-cache-inmemory';
import {environment} from 'src/environments/environment';
import {errorLink} from './dm-core/graphql/apollo-link-error';
import {concat} from 'apollo-link';
export function createApollo(httpLink: HttpLink) {
return {
link: concat(errorLink, httpLink.create({uri: environment.graphql, withCredentials: true})),
cache: new InMemoryCache(),
defaultOptions: {
watchQuery: {
errorPolicy: 'all'
}
}
};
}
@NgModule({
exports: [ApolloModule, HttpLinkModule],
providers: [
{
provide: APOLLO_OPTIONS,
useFactory: createApollo,
deps: [HttpLink]
}
]
})
export class GraphQLModule {}
Note the "withCredentials: true":
link: concat(errorLink, httpLink.create({uri: environment.graphql, withCredentials: true})),
the first, fault we are doing is importing ApolloClient from 'apollo-boost'. Actually we have to import ApolloClient from 'apollo-client'.
import ApolloClient from 'apollo-client';
Because, ApolloClient from apollo-boost only supports a smaller subset of configuration options. ApolloClient from apollo-client gives you all the configuration options.
then we can provide link and cache only to Apollo-client instance
import { InMemoryCache } from "apollo-cache-inmemory";
import { createHttpLink } from 'apollo-link-http';
const client = new ApolloClient({
link: new createHttpLink(
{
uri: "Your QraphQL Link"
}
),
cache: new InMemoryCache(),
});