Add support for dynamic headers

[Budry]

Motivation (for example):
We want get actual user authorization token from store for each request. Now we must create a new client for each request and is not optimal.
Can be used for others dynamic values which can be modified

import { GraphQLClient } from 'graphql-request'
import store from './store'

const client = new GraphQLClient('my-endpoint', {
  headers: {
    // Now we can get actual token from store for each request
    Authorization: () => store.getIdentity().getToken(),
  },
})

const query = `{
  Movie(title: "Inception") {
    releaseDate
    actors {
      name
    }
  }
}`

client.request(query).then(data => console.log(data))

[stphnnnn]

It seems the most common use case would be for setting auth headers.

The workaround I settled with was to use the setHeader function in my login and logout logic. It would be nice however, not to have to expose graphql-request functions to the wider application and have the headers option take a function.

Are there any plans to merge this PR or any reasons why it might not be desirable?

[sethidden]

If you really want to do this without this PR (seeing as it's up for a while) you can use a proxy:

  const proxyHandler : ProxyHandler<any> = {
    get(_, key) {
      const customerToken = getCustomerToken();
      const store = getStore();
      const currency = getCurrency();

      return {
        Authorization: `Bearer ${customerToken}`,
        store,
        'Content-Currency': currency,
      }[key] ?? undefined;
    },
    ownKeys() {
      const customerToken = getCustomerToken();
      const store = getStore();
      const currency = getCurrency();
      /*
       * Add key to object only if it'll have a value
       * We don't want to send 'Authorization: undefined' in Network requests - so the key *needs* to be absent
       */
      return [
        ...(!!customerToken ? ['Authorization'] : []),
        ...(!!store ? ['store'] : []),
        ...(!!currency? ['Content-Currency'] : []),
      ];
    },
    getOwnPropertyDescriptor(target, key) {
      return {
        value: this.get(target, key),
        enumerable: true,
        configurable: true,
      };
    },
  };

  const headers = new Proxy({}, proxyHandler); // use like new GraphQLClient(endpoint, { headers: headers } )

The headers in graphql-request are spread before each request - ...headers. So you need to make sure that whenever "headers" is spread, it will spit out only the properties that are actually set.

1. headers is spread within graphql-request
2. proxy's ownKeys() is called to see which keys should be spread
3. for each of the keys returned by ownKeys, the proxy handler's get() method is called

On subsequent reads of headers, the values returned by ownKeys will be different, based on your custom condition. In my case it was getCustomerToken(), getStore(), getCurrency() etc.

[jasonkuhrt]

New PR welcome

[jasonkuhrt]

Replaced by #341