ReferenceError: Headers is not defined with 3.1.0

[CapsE]

Hi I just tried this library for the first time with your example code
`const { GraphQLClient, gql } = require('graphql-request');

async function main() {
const endpoint = 'https://graphql.contentful.com/content/v1/spaces/'

const graphQLClient = new GraphQLClient(endpoint, {
    headers: {
        Authorization: 'Bearer <TOKEN>',
    },

})

const query = gql`
  query page {
      pageCollection(preview: true) {
        items {
          route,
          contentCollection {
            items {
              type,
              data
            }
          }
        }
      }
}

`

const data = await graphQLClient.request(query)
console.log(JSON.stringify(data, undefined, 2))

}

main().catch((error) => console.error(error))`

Which resulted in the error "ReferenceError: Headers is not defined" the error was only displayed when the headers field was present if I removed the headers no error was given. Downgrading to version 3.0.0 fixed the issue

[jz222]

Hi,

I can confirm that. It worked like a charm before updating to the latest version.

const { GraphQLClient } = require("graphql-request");

const client = new GraphQLClient(url);

client.setHeaders({ authorization: `Bearer ${JWT}` });

return client;

[madikun]

Hi, instead of headers: {} use Headers: {}, it helped me
example:

const client = new GraphQLClient(url, { Headers: { authorization: `Bearer ${JWT}` })

Hi,

I can confirm that. It worked like a charm before updating to the latest version.

const { GraphQLClient } = require("graphql-request");

const client = new GraphQLClient(url);

client.setHeaders({ authorization: `Bearer ${JWT}` });

return client;

[CapsE]

@madikun are you sure about that? I tried it and while it got rid of the error it also didn't send the authorization Token for me.

[sazaam]

supposedly-native 'Headers' class seems to be the issue

----> graphql-request/dist/index.js
replace

if ( headers instanceof Headers)

by

if ( 'undefined' !== typeof Headers && headers instanceof Headers)

and it reworks instanceof Heavens

[shinnoki]

I'm using TypeScript and workaround like below helped me.

import { GraphQLClient } from "graphql-request";
import { Headers } from "cross-fetch";

// @ts-ignore
global.Headers = global.Headers || Headers;

const client = new GraphQLClient(YOUR_URL_HERE);

[nahtnam]

@shinnoki's workaround worked for me

[asnaseer-resilient]

@shinnoki's workaround worked for me too

[mykhailo-monchak]

+1 report of the issue. @shinnoki's workaround worked for me too

[feedm3]

Solution for Node in plain JS:

const { GraphQLClient } = require('graphql-request');
const { Headers } = require('cross-fetch');

global.Headers = global.Headers || Headers;

const graphqlClient = new GraphQLClient(YOUR_URL, {
  headers: {
    authorization: YOUR_TOKEN,
  },
});

[aLx450]

The solution provided by @feedm3 also works. Thank you.

[JamieBradders]

I've experienced this today also, thanks for posting workaround @feedm3

[crieggalder]

This helped me too. Thanks @feedm3!

[Sceat]

they now use cross-fetch which totally breaks custom node-fetch usage, notably cookies as described in the readme 😒

[mi-kas]

Importing the polyfill from cross-fetch fixed the issue for me:

import 'cross-fetch/polyfill';

[csterritt]

The workaround provided by @mi-kas worked for me... thanks!

[MohamadHFallah]

Solution for Node in plain JS:

const { GraphQLClient } = require('graphql-request');
const { Headers } = require('cross-fetch');

global.Headers = global.Headers || Headers;

const graphqlClient = new GraphQLClient(YOUR_URL, {
  headers: {
    authorization: YOUR_TOKEN,
  },
});

This helped me too in the typescript project. Thanks a lot, @feedm3!

[miking-the-viking]

I'm using TypeScript and workaround like below helped me.

import { GraphQLClient } from "graphql-request";
import { Headers } from "cross-fetch";

// @ts-ignore
global.Headers = global.Headers || Headers;

const client = new GraphQLClient(YOUR_URL_HERE);

You magnificent web developer! Bless you!

[mkausas]

in case it helps anyone, Authorization needed to be capitalized for me

  const graphQLClient = new GraphQLClient(PROD_GRAPHQL_URL, {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });

[P4sca1]

HTTP header keys are case insensitive.