CODEWITHSUNDEEP
javascriptreactjscookiesgraphqlapollo
Caleb
Caleb

Reputation: 489

Apollo Link not sending cookies

I am able to retrieve my http only secure cookie on my backed by using req.headers.cookie with the following code:

const apolloClient = new ApolloClient({
  uri: "http://localhost:3001/graphql",
  cache: new InMemoryCache(),
  credentials: "include",
  headers: {
    authorization: token ? token : "",
  },
});

what my console.log(req.headers) in context on server looks like:

{
  host: 'localhost:3001',
  connection: 'keep-alive',
  'content-length': '430',
  accept: '*/*',
  authorization: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiI2MzMxZWJmMGZhNjY4MjUzYmRhMzhmNmUiLCJpYXQiOjE2NjU0MTc0MDcsImV4cCI6MTY2NTQxNzQyN30.Huwi7mwL3fwtEs-_-fshhTw9qOMG57BwvXszX-uWrlk',
  'user-agent': '***********',        
  'content-type': 'application/json',
  'sec-gpc': '1',
  'accept-language': 'en-US,en',
  origin: 'http://localhost:3000',
  'sec-fetch-site': 'same-site',
  'sec-fetch-mode': 'cors',
  'sec-fetch-dest': 'empty',
  referer: 'http://localhost:3000/',
  'accept-encoding': 'gzip, deflate, br',
  cookie: 'refreshToken=*********'      
}

When I change my code to implement apollo link, I am no longer able to see the cookie get sent:

const httpLink = new HttpLink({
  uri: "http://localhost:3001/graphql",
});

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.forEach(({ message, locations, path }) =>
      console.log(
        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
      )
    );

  if (networkError) console.log(`[Network error]: ${networkError}`);
});

const authLink = new ApolloLink((operation, forward) => {
  operation.setContext(({ headers }) => ({
    headers: {
      ...headers,
      authorization: token ? token : "",
    },
  }));

  return forward(operation);
});


const apolloClient = new ApolloClient({
  cache: new InMemoryCache(),
  credentials: "include",
  link: from([authLink, errorLink, httpLink]),
});

req.headers:

{
  host: 'localhost:3001',
  connection: 'keep-alive',
  'content-length': '430',
  accept: '*/*',
  authorization: '**************',
  'user-agent': '***************',        
  'content-type': 'application/json',
  'sec-gpc': '1',
  'accept-language': 'en-US,en',
  origin: 'http://localhost:3000',
  'sec-fetch-site': 'same-site',
  'sec-fetch-mode': 'cors',
  'sec-fetch-dest': 'empty',
  referer: 'http://localhost:3000/',
  'accept-encoding': 'gzip, deflate, br'
}

Why is my http cookie only being sent in the first iteration of code without apollo link, and how can I fix it?

Upvotes: 0

Views: 1099

Answers (1)

Caleb
Caleb

Reputation: 489

The issue was my credentials: include needed to be inside the httpLink like this:

const httpLink = new HttpLink({
  uri: "http://localhost:3001/graphql",
  credentials: "include"
});

Thus the apolloclient needs to look like (removed credentials):

const apolloClient = new ApolloClient({
  cache: new InMemoryCache(),
  link: from([authLink, errorLink.concat(httpLink), httpLink]),
});

This part of the Apollo documentation is what brought that to my attention.

Upvotes: 1

Related Questions