apollo-client: Unable to get apollo client response headers

I am able to see the response headers in the network but unable to get those response headers.

Please follow the below screenshots.

Network Response Headers: Screenshot from 2021-03-24 16-12-17

Console Response Data(Empty headers): Screenshot from 2021-03-24 16-14-19

Actual tried Code:

const httpLink = new HttpLink({ uri: URL_SERVER_GRAPHQL })

// Setup the header for the request
const middlewareAuthLink = new ApolloLink((operation, forward) => {
  const token = localStorage.getItem(AUTH_TOKEN)

  const authorizationHeader = token ? `Bearer ${token}` : null
  operation.setContext({
    headers: {
      authorization: authorizationHeader
    }
  })
  return forward(operation)
})



//After the backend responds, we take the refreshToken from headers if it exists, and save it in the cookie.
const afterwareLink = new ApolloLink((operation, forward) => {
  return forward(operation).map(response => {
    const context = operation.getContext()
    const {
      response: { headers }
    } = context

    if (headers) {
      const refreshToken = headers.get('refreshToken')
      if (refreshToken) {
        localStorage.setItem(AUTH_TOKEN, refreshToken)
      }
    }

    return response
  })
})

const client = new ApolloClient({
  link: from([middlewareAuthLink, afterwareLink, httpLink]),
  cache: new InMemoryCache()
})

Please help with this issue.

Thanks in advance.

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 21 (5 by maintainers)

Most upvoted comments

Hi @brainkim, Any update regarding this issue…?

Suribabu-Balam on May 17, 2021

Hi @brainkim, Any update regarding this issue…? let me know if anything is required.

Suribabu-Balam on Apr 26, 2021

@Suribabu-Balam from your client side code example above, in your afterwareLink, you’re calling the following:

const refreshToken = headers.get('refreshToken')

I don’t see refreshToken being set anywhere in the server reproduction you provided. Headers are working though; if you want to verify this, in your server reproduction, add the following 2 lines to the top of your index.js context function:

const context = async ({ req, res }) => {
  res.append("Access-Control-Expose-Headers", "some-header");
  res.header("some-header", "some-value");
  ...
}

Then back in your client app, adjust your afterwareLink to add the following:

const afterwareLink = new ApolloLink((operation, forward) => {
    ...
    if (authHeader) {
      console.log("Here comes the header ...", authHeader.get("some-header"))
    ...

If you run that, you’ll see that the some-header value is logged properly on the client side.

All of the above being said, this isn’t a bug with Apollo Client, so I’ll close this off. If you would like to continue this discussion, head over to our community forums: https://community.apollographql.com - thanks!

hwillson on May 28, 2021

Are you ensuring that you’re specifying Access-Control-Expose-Headers in the response headers from the server?

ayan4m1 on Apr 23, 2021

Hi @brainkim,

Here is the GitHub repository URL: https://github.com/Suribabu-Balam/apollo-headers

Please check and let me know if anything is required.

Suribabu-Balam on Apr 19, 2021

Ok, I will provide the git hub repository URL.

Suribabu-Balam on Apr 6, 2021