Reading response header in onError in Apollo React

Question

In React Apollo client, we have some links configured.

const apollo = new ApolloClient({
  cache: new InMemoryCache(),
  link: from([
    onErrorLink,
    afterwareLink,
    httpLink
  ])
});

In our application, when session times out we return the response with 200 status and some response headers (timeout: true). By using these response headers we need to show some dialog on UI. The response header also has content-type: text/html. Also remember, sessions are maintained on federal level (SSO) in our organization and we do not control response context for that.

When session times out and we receive response from server, Apollo react client onError link fires up and we try to access response as below.

const context = operation.getContext();
const response = context.response;
const headers = response.headers;

In above code, context never has response property and hence response is undefined. Due to this, I am not able to access header values.

Analysis

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

1. I have seen in case of error, only onError is resolved and afterwareLink map function never triggers.
2. response is populated in context only if comes via forward function given by Apollo.
3. In successful API calls, afterwareLink map function do resolves and I am able to find all headers just fine.
4. Solutions online are similar but just does not work.

I am stumped here. I can clearly see response headers in Dev Tools and Fiddler. It's for sure there. Just Apollo is not allowing me to access that. In my case, networkError or graphQLErrors are not of much use.

Answer 1

This was few steps problem to solve. Sharing my findings and solutions below.

1. Headers

Make sure the response from API has the following header value.

Access-Control-Allow-Origin: http://uiclient.com
Access-Control-Expose-Headers: *

The first header will make sure the browser is satisfied and allows UI to resolve the response. The second header will make sure UI can read the response headers.

2. Response Content Type

In my case response type was not as expected by Graph and cannot be changed as this was from federal layer (SSO). Others can face the same problem in the case of third party service, 401, 403 or other status codes.

To resolve the problem, I wrote a simple custom fetch function and attached it to HttpLink.

const httpFetch = (uri, options) => {
  return fetch(uri, options).then(response => {
    // ... read headers from response.headers.
    
    if (response.status >= 500) {  // or handle 400 errors
      return Promise.reject(response.status);
    }
    return response;
  }).catch(error => {
    return Promise.reject(error);
  });
};

const httpLink = new HttpLink({
  uri: 'https://serviceapi.com',
  fetch: httpFetch
});

3. Handle httpFetch

This technique can be used to read data in Apollo client when your response is not JSON (or is JSON). In my case, I checked the header first and if the header had session timeout value then resolved the promise using a custom object (as the main content will be HTML).

The above steps will mostly help you to customize any response in Apollo. Also note, I did not write any custom middleware (or link) to address this issue.