React Apollo Client not sending cookies React Apollo Client not sending cookies express express

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.