React Apollo Client not sending cookies
I do not understand this why the documentation says what it does, although perhaps a developer with more experience would not have had a problem.
Anyway, the less experienced developer should note that instead of:
const link = createHttpLink({ uri: 'http://localhost:3000/api/graphql', opts: { credentials: 'include', }});
It should just be:
const httpLink = createHttpLink({ uri: 'http://localhost:3000/api/graphql', credentials: 'same-origin'});
In other words, there is no separate opts
object within the createHttpLink configuration object.
You code should be
const link = createHttpLink({ uri: 'http://localhost:3000/api/graphql', credentials: 'include'});const client = new ApolloClient({ link, cache: new InMemoryCache()});
See official doc for details: apollo client cookie
Also make sure that your server returns correct value for the 'Access-Control-Allow-Origin' header. It should not be equal '*'
There is a helper from the Apollo Client library called createNetworkInterface
and you can import it like so:
import ApolloClient, { createNetworkInterface } from 'apollo-client';
Then you can implement it like so:
const networkInterface = createNetworkInterface({ uri: });
The Apollo Client assumes that your graphql client on the express side is listening on the endpoint /graphql
. You can verify this by going to your server.js
file.
You should see something like:
// Instruct Express to pass on any request made to the '/graphql' route// to the GraphQL instance.app.use( '/graphql', expressGraphQL({ schema, graphiql: true }));
So the uri:
option you specify is still GraphQL like so:
const networkInterface = createNetworkInterface({ uri: '/graphql'});
We do this because whenever we create our own networkInterface
it no longer assumes the uri
is /graphql
so we have to directly say it.
The part that really matters is the opts:
property like so:
const networkInterface = createNetworkInterface({ uri: '/graphql', opts: { credentials: 'same-origin' }});
This is saying its safe to send along cookies whenever it makes a query to the backend server. So you take this networkInterface
and pass it along to the Apollo Client like so:
const networkInterface = createNetworkInterface({ uri: '/graphql', opts: { credentials: 'same-origin' }});const client = new ApolloClient({ networkInterface, dataIdFromObject: o => o.id});
So that is pretty much it for getting Apollo to send along cookies along with every single request it makes to the backend.