Add or modify headers async before query, mutation or subscription is being sent

[chdanielmueller]

I would like to add a Bearer token to the requests automatically.
An optional function which can modify the headers would solve this issue.

Sample:

new window.EmbeddedSandbox({
  target: '#sandbox',
  initialEndpoint: window.location.href,
  initialState: {
    sharedHeaders: {
      'X-SpecialHeader': 'WILL_BE_REPLACED_AUTOMATICALLY'
    }
  },
  modifyHeaders: async (url, headers) => {
    // Add Authorization header if not provided
    if (!headers.Authorization) {
      const accessToken = await window.getAccessToken();
      headers.Authorization = 'Bearer ' + accessToken;
    }
    // Modify special header if shared header is not unchecked
    if (headers['X-SpecialHeader'] === 'WILL_BE_REPLACED_AUTOMATICALLY') {
      const special = await window.getTheValue();
      headers['X-SpecialHeader'] = special;
    }
    return headers;
  }
});

I already provided a PR for this. #307

[chdanielmueller]

Hi @glasser,
Could you provide me with some context about why the linked PR #307 was closed?
I would like to implement a feature that accommodates my use case. It would be great if you could provide me with information to if/how that would be possible.
Thanks

[Jephuff]

Hi @chdanielmueller,
I think this might already be supported with the ability to override the handleRequest function. You should be able to pass that and change the headers as needed before the request is sent to your server.

If I update your example, It would look something like this.

new EmbeddedSandbox({
  target: '#sandbox',
  initialEndpoint: window.location.href,
  initialState: {
    sharedHeaders: {
      'X-SpecialHeader': 'WILL_BE_REPLACED_AUTOMATICALLY',
    },
  },
  handleRequest: async (endpointUrl, options) => {
    const headers = { ...options.headers };
    // Add Authorization header if not provided
    if (!headers.Authorization) {
      const accessToken = await window.getAccessToken();
      headers.Authorization = 'Bearer ' + accessToken;
    }
    // Modify special header if shared header is not unchecked
    if (headers['X-SpecialHeader'] === 'WILL_BE_REPLACED_AUTOMATICALLY') {
      const special = await window.getTheValue();
      headers['X-SpecialHeader'] = special;
    }

    return fetch(endpointUrl, { ...options, headers });
  },
});

Would you be able to take a look and let me know if this covers your use case?

[chdanielmueller]

Hi @Jephuff

This was my solution for modifying the headers of HTTP Requests.
Unfortunately this does not work for subscriptions.
Therefore I decided to add a function for modifying headers regardless of the communication method.