Apollo-link-rest: Headers: Polyfill / Iterable Conformance Issues [Edge]

[val-samonte]

Intended outcome: should proceed normally.

Actual outcome: received the following errors:

How to reproduce the issue:

1. Use Edge browser
2. Setup RestLink as ff:

const authRestLink = new RestLink({
  uri: `${baseUrl}/1.0/auth/`,
  credentials: 'same-origin'
});

I actually trace this and the Headers is receiving undefined as an argument. Apparently Edge doesn't allow this.

[fbartho]

@val-samonte I recommend you use a Polyfill like this one: https://github.com/jimmywarting/fetch-headers

[val-samonte]

Thank you, will try this and see if it solves the issue. Will close this afterwards.

[val-samonte]

@fbartho sorry looks like there's still a problem. After implementing the polyfill you provided I am getting this error:

After tracing the stack, it is in this code:

[val-samonte]

Correct me if I am wrong, but as I understand, this current should be an instance of Header right? Upon checking https://developer.mozilla.org/en-US/docs/Web/API/Headers , it doesn't have the forEach method, so I assume this has to be an array of Headers?

[fbartho]

According to that page you linked to, Headers is supposed to have a forEach method? Maybe the headers polyfill I linked you to is wrong?

Looking at the polyfill unit-tests, they have one that claims headers should have a forEach method
https://github.com/jimmywarting/fetch-headers/blob/614411d49505db07b350f7afa02290fae2170f56/test/test.js#L107-L122

Did you select a different polyfill library?

[val-samonte]

Oh my bad, I didn't see it on the sidepanel. Anyway yes I can confirm that I am using the correct polyfill:

I created my project using create-react-app and eject from it, edited the config/polyfill.js file and added this polyfill just below the whatwg-fetch

require('whatwg-fetch');
self.Headers = require('fetch-headers');

Am I doing it wrong?

[fbartho]

My experience says that to polyfill, you have to have a line like:
global.Headers = global.Headers || require('fetch-headers');

Disclaimer: I've don't have a lot of familiarity with create-react-app and config/polyfill.js. I'm also working in TypeScript. So my actual code (because Android needs the polyfill) is as follows:

import PolyfillHeaders = require("fetch-headers");
if (global.Headers == null) {
    global.Headers = PolyfillHeaders;
}

Note, I should move the import into the if-block as a dynamic import. (one of these days).

[val-samonte]

Ahh yes, that's much better, I'll try that.

[val-samonte]

Ah yeah, now I remember. The reason why I assigned it directly is because Edge is having issues with it's existing Header, so global.Headers = global.Headers || require('fetch-headers'); is not applicable.

I also tried this and went back encountering the same error I posted.

But yeah, even chrome doesn't have the Headers.forEach, and I was also wondering why MDN doesn't have it on the compat table below. Can we have a workaround for this for the meantime?

[fbartho]

I'd be happy to accept a PR that uses an alternative way to iterate the headers. I think the spec mandates iterable-conformance for Headers, so if you switch the forEach code to Iterable, that would be fine with me. -- I think people end up needing to polyfill es2015.iterable instead for that to work though, so… that's a problem.

[val-samonte]

I see! Thank you, will try to submit a PR when I am available. Happy to help.

[fbartho]

Note: TypeScript believes that Headers should have a forEach method too.

[fbartho]

I'm going to close this issue since we answered/resolved the original question @val-samonte -- but please feel free to submit a PR for iterable usage instead of forEach!

[tomevans18]

@val-samonte did you get a chance to look at this?
If not I can take a look and raise a PR as I'm also facing the same issue in IE11.

[tomevans18]

Was thinking to replace

current.forEach(function (value, key) {
    accumulator.append(key, value);
});

with...

for (var pair of current.entries()) {
    accumulator.append(pair[0], pair[1]);
}

[fbartho]

If you’re looking for max compatibility, you may just want to do: for const key in current I’m not sure that entries() was available much earlier than forEach

[stefan-djokic]

@val-samonte This happens because headers param is undefined in normalizeHeaders function https://github.com/apollographql/apollo-link-rest/blob/master/src/restLink.ts#L487

Calling new Headers with undefined as param throw this TypeError.

Until this is resolved quick fix would be just to add some header param to the creation of RestLink.
For example:

const authRestLink = new RestLink({
  uri: `${baseUrl}/1.0/auth/`,
  credentials: 'same-origin',
  headers: {
    'Content-Type': 'application/json'
  },
});

[Janice1114]

@val-samonte This happens because headers param is undefined in normalizeHeaders function https://github.com/apollographql/apollo-link-rest/blob/master/src/restLink.ts#L487

Calling new Headers with undefined as param throw this TypeError.

Until this is resolved quick fix would be just to add some header param to the creation of RestLink.
For example:

const authRestLink = new RestLink({
  uri: `${baseUrl}/1.0/auth/`,
  credentials: 'same-origin',
  headers: {
    'Content-Type': 'application/json'
  },
});

@stefan-djokic Has this issue been resolved? I'm also encounted the same issue, but not in Edge browser. I'm using weixin to included the apollo-link-rest, and there is no headers in the environment, no headers found for their request api. Could you offer to help for some solutions to hack or skip the errors we've encounted? Much appreciate if you could offer any hints or help.