Apollo-link: header is always empty for each response received on client from server

Created on 18 May 2019 · 3Comments · Source: apollographql/apollo-link

I have added a afterwareLink which basically reads the response header and sets up the token.

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('x-refresh-token');

if (refreshToken) {
localStorage.setItem('refreshToken', refreshToken);
}
}

return response;
});
});

My link ordering is like this
I tried both approaches
let links = [elink, stateLink, setSiteIdHeaderLink, afterwareLink, httpLink]

let links = [elink, stateLink, setSiteIdHeaderLink, httpLink, afterwareLink]

Every time I print the response headers its always empty, but I can see them in browser that it is being sent from server but not receiving them in context.
const context = operation.getContext();

Screen Shot 2019-05-18 at 3 31 44 PM
Packages:

```
"apollo-boost": "^0.1.22",
"apollo-cache-inmemory": "^1.3.11",
"apollo-cache-persist": "^0.1.1",
"apollo-client": "^2.4.7",
"apollo-link": "^1.2.3",
"apollo-link-batch-http": "^1.2.8",
"apollo-link-http": "^1.5.9",
"apollo-link-retry": "^2.2.5",
"apollo-link-schema": "^1.1.1",
"apollo-link-token-refresh": "^0.2.3",
"apollo-link-ws": "^1.0.9",

I tried to use custom-fetch method event that didn't worked

const customFetch = (uri, options) => {
let promise = fetch(uri, options)
promise
.then(response => {
let refreshToken = response.headers.get('token-x')
console.log(refreshToken)
if (refreshToken) {
console.log(refreshToken)
}
return response
})
.catch(e => {
throw e
})
return promise
}
const httpLink = middlewareLink.concat(createHttpLink({uri: API_URL ,credentials: 'include', opts:{
credentials:'include'
}, fetch: customFetch }));
```

Source

techyrajeev

👍6

Most helpful comment

This is working for me, but I would like some nice way of receiving response headers with apollo client

````javascript
import { InMemoryCache } from "apollo-cache-inmemory"
import { ApolloClient } from "apollo-client"
import { ApolloLink } from "apollo-link"
import { HttpLink } from "apollo-link-http"
import fetch from "node-fetch"

const afterwareLink = new ApolloLink((operation, forward) =>
forward(operation).map(response => {
const context = operation.getContext()
const {
response: { headers },
} = context

    console.log(headers) 

    return response
})

)
const myfetch = fetch as any // this hack is sadly not needed with apollo-boost
const httpLink = new HttpLink({ uri: "http://localhost:4000/graphql", fetch: myfetch })

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

````

peterbabic on 20 Oct 2019

👍2 👎1

All 3 comments

Did you ever figure out a solution? I'm experiencing this same issue. I can see in devtools that the response header I'm looking for is ultimately coming back, however the response.headers is an empty Headers constructor in the afterware.

oqx on 1 Aug 2019