graphql-request: ReferenceError: Headers is not defined with 3.1.0

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

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 40
Comments: 19

Commits related to this issue

Force graphql-request =3.0.0 See https://github.com/prisma-labs/graphql-request/issues/206 — committed to redwoodjs/repeaterdev-js by cannikin 4 years ago
Document workaround for #206 — committed to NeoTheThird/graphql-request by NeoTheThird 4 years ago
fix: global Headers class reference Couple things that have been done to avoid similar problem in future: 1. Use namespaced import style to avoid apparent references to global Headers that are ac... — committed to jasonkuhrt/graphql-request by jasonkuhrt 4 years ago
fix: global Headers class reference (#218) Couple things that have been done to avoid similar problem in future: 1. Use namespaced import style to avoid apparent references to global Headers t... — committed to jasonkuhrt/graphql-request by deleted user 4 years ago
Downgrade graphql-request Because of issue https://github.com/prisma-labs/graphql-request/issues/206 — committed to serlo/api.serlo.org by hugotiburtino 4 years ago

Most upvoted comments

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,
  },
});

+27

feedm3 on Sep 9, 2020

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);

+22

shinnoki on Sep 7, 2020

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

import 'cross-fetch/polyfill';

+15

mi-kas on Sep 16, 2020

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;

madikun on Sep 5, 2020

@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.

CapsE on Sep 5, 2020

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

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

mkausas on Nov 26, 2022

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

Sceat on Sep 15, 2020

supposedly-native ‘Headers’ class seems to be the issue

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

if ( headers instanceof Headers)

if ( ‘undefined’ !== typeof Headers && headers instanceof Headers)

and it reworks instanceof Heavens

sazaam on Sep 6, 2020