fix(rules): fix header concatenation

[jan-law]

Fixes #390

When two headers objects are passed to fromFetch, the last header object listed (config.headers) seems to replace the previous headers object (login.getHeaders). This appends the correct Content-type, but removes the Authorization header from the request. Appending the config.headers into the original headers object, then passing in the updated headers object last will preserve all the headers.

[andrewazores]

Makes sense. Is there any way to handle this merging more generically, so it isn't a special case for the headers in particular?

https://lodash.com/docs/4.17.15#merge may be useful here?

[jan-law]

I know _.merge() is supposed to deep copy objects, but I'm not sure what's happening to the Headers here?

Whichever way I arrange the dest and source from _.merge(dest, [source]), the Content-type header from config.headers disappears. The final request contains the other merged fields perfectly fine.

All of these return Request failed (415 Unsupported Media Type): "reason":"Bad content type: text/plain;charset=UTF-8":

let request = {
          credentials: 'include',
          mode: 'cors',
          headers,
        } as RequestInit;

        _.merge(config, request);

        return fromFetch(`${this.login.authority}/api/${apiVersion}/${path}`, config);

let request = {
          credentials: 'include',
          mode: 'cors',
          headers,
        } as RequestInit;

        _.merge(request, config);

        return fromFetch(`${this.login.authority}/api/${apiVersion}/${path}`, request);

let request = {
          credentials: 'include',
          mode: 'cors',
          headers: headers,
        } as RequestInit;

        _.merge(request, config);

        return fromFetch(`${this.login.authority}/api/${apiVersion}/${path}`, request);

let request = {
          credentials: 'include',
          mode: 'cors',
          headers: headers,
        } as RequestInit;

        if(!!config && !!config.headers) {
          _.merge(request.headers, config.headers);
        }

        _.merge(config, request);

        return fromFetch(`${this.login.authority}/api/${apiVersion}/${path}`, config);

[andrewazores]

Ah okay, maybe it isn't working as expected because the headers object isn't just a plain Object but the Headers type.

[jan-law]

I think I need to call headers.set(key, value) when merging the two objects.

Style-wise, I could use mergeWith and a customizer like below. What do you think?

function customizer(dest, src) {
          if (dest instanceof Headers && src instanceof Headers) {
            Object.entries(src).forEach(([k, v]) => {
              dest.set(k, v);
            });
          }
          return dest;
        }

  _.mergeWith({
    credentials: 'include',
    mode: 'cors',
    headers: headers,
  } as RequestInit, config, customizer);

  return fromFetch(`${this.login.authority}/api/${apiVersion}/${path}`, config);

[andrewazores]

The docs say that mergeWith returns the merged result and also mutates the first argument - if that's accurate then I think your snippet is missing something because it looks like the config passed to fromFetch is just going to be the original, unmodified config object, isn't it?

config = _.mergeWith() would be enough to do it, I think. Or else extract the RequestInit to a local variable and pass that reference in to _.mergeWith and then pass that same reference to the now-mutated object to fromFetch?