[graphiql] HTTP customized headers are not being sent

[brettins]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

The HTTP authorisation header I have included is not being sent to the GraphQL server.

{
  "Authorization": "Bearer eyJhbGciOXXXXXXXXXXXXXXXXXXXXXXXXXXXXXoJ8nw"
}

Expected Behavior

That when I enter something into the "Headers" tab that it is sent to the GraphQL server as a header without any additional steps required.

Steps To Reproduce

1. Install API Platform
2. Enable GraphQL
3. Go to https://localhost/graphql
4. Note that it is GraphIQL being used
5. Enter an authorization token and a query

{
"Authorization": "Bearer XXXXX"
}
6. Send the query
7. In your security handler, `var_dump` out the $request->headers
8. Observe that the Bearer token is not in the headers.

object(Symfony\Component\HttpFoundation\HeaderBag)#18 (2) {
  ["headers":protected]=>
  array(20) {
    ["accept"]=>
    array(1) {
      [0]=>
      string(16) "application/json"
    }
    ["sec-ch-ua"]=>
    array(1) {
      [0]=>
      string(65) ""Not_A Brand";v="99", "Google Chrome";v="109", "Chromium";v="109""
    }
    ["x-forwarded-for"]=>
    array(1) {
      [0]=>
      string(13) "192.168.128.1"
    }
    ["sec-fetch-dest"]=>
    array(1) {
      [0]=>
      string(5) "empty"
    }
    ["content-type"]=>
    array(1) {
      [0]=>
      string(16) "application/json"
    }
    ["sec-ch-ua-platform"]=>
    array(1) {
      [0]=>
      string(7) ""Linux""
    }
    ["host"]=>
    array(1) {
      [0]=>
      string(9) "localhost"
    }
    ["x-forwarded-host"]=>
    array(1) {
      [0]=>
      string(9) "localhost"
    }
    ["referer"]=>
    array(1) {
      [0]=>
      string(103) "https://localhost/graphql?query=query%20%7B%0A%20%20categories%20%7B%0A%20%20%20%20id%0A%20%20%7D%0A%7D"
    }
    ["accept-language"]=>
    array(1) {
      [0]=>
      string(26) "en-GB,en-US;q=0.9,en;q=0.8"
    }
    ["content-length"]=>
    array(1) {
      [0]=>
      string(2) "51"
    }
    ["origin"]=>
    array(1) {
      [0]=>
      string(17) "https://localhost"
    }
    ["accept-encoding"]=>
    array(1) {
      [0]=>
      string(17) "gzip, deflate, br"
    }
    ["cookie"]=>
    array(1) {
      [0]=>
      string(147) "_ga=GA1.1.1658330265.1666906099; g_state={"i_l":2,"i_p":1667943626333}; _ga_5ECS2C8FTS=GS1.1.1667863625.9.1.1667866096.0.0.0; XDEBUG_SESSION=VSCODE"
    }
    ["sec-fetch-site"]=>
    array(1) {
      [0]=>
      string(11) "same-origin"
    }
    ["sec-fetch-mode"]=>
    array(1) {
      [0]=>
      string(4) "cors"
    }
    ["sec-ch-ua-mobile"]=>
    array(1) {
      [0]=>
      string(2) "?0"
    }
    ["x-forwarded-proto"]=>
    array(1) {
      [0]=>
      string(5) "https"
    }
    ["user-agent"]=>
    array(1) {
      [0]=>
      string(101) "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36"
    }
    ["x-php-ob-level"]=>
    array(1) {
      [0]=>
      string(1) "1"
    }
  }
  ["cacheControl":protected]=>
  array(0) {
  }
}

### Module pattern

- [ ] graphiql-umd
- [ ] graphiql-esm
- [ ] graphiql-commonjs

### Environment

```Markdown
- GraphiQL Version: version does not seem to be listed
- OS: Ubuntu
- Browser: Chrome
- Bundler: API Platform

Anything else?

The same steps using GraphQL Playground work seamlessly and the header is correctly passed, so the issue is not the back end. 

The GraphQL Playground output looks like this:



object(Symfony\Component\HttpFoundation\HeaderBag)#18 (2) {
  ["headers":protected]=>
  array(20) {
    ["accept-encoding"]=>
    array(1) {
      [0]=>
      string(17) "gzip, deflate, br"
    }
    ["origin"]=>
    array(1) {
      [0]=>
      string(17) "https://localhost"
    }
    ["content-type"]=>
    array(1) {
      [0]=>
      string(16) "application/json"
    }
    ["authorization"]=>
    array(1) {
      [0]=>
      string(1151) "Bearer eyJhbGciXXXXXXXXXXXXXXXXXXXXXazWLPjQOpeXDkGzwrdE-KFzPXzC5MEhz4yWufa0yq0OJy6-bL-5Q_3eaOGS1M0L010gTp-UgPuMjiDGE6Vjby3wIpfGNnPpkIUFZFqcDjm-i6XsSQTP8nuECa3S3ZxvNvAy21iB4rDcEhoKDn_mxPcX8YE1MMoLwKkH8G_vqsDatCci8TDbP7vGSdQDVu4NKDlaJIXP2ebDtgE7kgPX7fypobM1OIVt0oMw"
    }
    ["sec-fetch-mode"]=>
    array(1) {
      [0]=>
      string(4) "cors"
    }
    ["x-forwarded-for"]=>
    array(1) {
      [0]=>
      string(13) "192.168.128.1"
    }
    ["sec-ch-ua"]=>
    array(1) {
      [0]=>
      string(65) ""Not_A Brand";v="99", "Google Chrome";v="109", "Chromium";v="109""
    }
    ["x-forwarded-host"]=>
    array(1) {
      [0]=>
      string(9) "localhost"
    }
    ["sec-fetch-dest"]=>
    array(1) {
      [0]=>
      string(5) "empty"
    }
    ["host"]=>
    array(1) {
      [0]=>
      string(9) "localhost"
    }
    ["x-forwarded-proto"]=>
    array(1) {
      [0]=>
      string(5) "https"
    }
    ["referer"]=>
    array(1) {
      [0]=>
      string(44) "https://localhost/graphql/graphql_playground"
    }
    ["user-agent"]=>
    array(1) {
      [0]=>
      string(101) "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36"
    }
    ["sec-ch-ua-platform"]=>
    array(1) {
      [0]=>
      string(7) ""Linux""
    }
    ["content-length"]=>
    array(1) {
      [0]=>
      string(4) "1468"
    }
    ["accept"]=>
    array(1) {
      [0]=>
      string(3) "*/*"
    }
    ["sec-fetch-site"]=>
    array(1) {
      [0]=>
      string(11) "same-origin"
    }
    ["sec-ch-ua-mobile"]=>
    array(1) {
      [0]=>
      string(2) "?0"
    }
    ["accept-language"]=>
    array(1) {
      [0]=>
      string(26) "en-GB,en-US;q=0.9,en;q=0.8"
    }
    ["x-php-ob-level"]=>
    array(1) {
      [0]=>
      string(1) "1"
    }
  }
  ["cacheControl":protected]=>
  array(0) {
  }
}

[akbindal]

+1 facing the same issue

[dbrrt]

@brettins ran into the same issue, followed an example online that didn't forward the headers from the actual operation in the fetch function.

changed

const graphqlFetch = (graphqlParams) => {
  return fetch(<url>, {
    method: "post",
    headers: {
     "Content-Type": "application/json", 
    },
   body: JSON.stringify(graphqlParams),
   credentials: "same-origin"
  }).then((response) => response.json());
}

to

const graphqlFetch = (graphqlParams, {headers}) => {
  return fetch(<url>, {
    method: "post",
    headers: {
     "Content-Type": "application/json",
      ...headers
    },
   body: JSON.stringify(graphqlParams),
   credentials: "same-origin"
  }).then((response) => response.json());
}

Hope it helps!

[acao]

thank you @dbrrt, this used to be in the readme but we replaced it with the createFetcher()

I will remove the bug label and replace it with documentation as a reminder

@dbbrt's solution above is the appropriate answer, if you're implementing a custom fetcher prop

[brettins]

I'm not sure I understand how this is not a bug. If the fetch function isn't including headers, then shouldn't that be added in the graphiql code?

I'm using a minified version of the graphiql code, I'm not looking to make changes to it to fix it. Maybe I'm misunderstanding how this project is used, as it's simply auto-included for me using API Platform.

[iwanluijks]

@brettins Bit of a workaround when using API Platform, but if you are using that in combination with Symfony you can override the graphQLFetcher function in public/bundles/apiplatform/init-graphiql.js. Just note that the assets:install command of Symfony puts the original init-graphiql.js file back and thus overwrites your changes again. So when deploying your code, just make a copy of your init-graphiql.js file and put it back in place after the assets:install command :). At least that does the trick and allows you to send along custom headers...

[brettins]

I appreciate the clarification and potential workaround!

At this point I'm using graphql playground as it works out of the box. I was excited when I saw that GraphIQl had added a bunch of features that graphql playground had but it looks like I'll just stick with playground until GraphIQl works out of the box.

[acao]

Usually a custom fetcher prop implemenation is not needed anymore as of a few years ago. Now we can use GraphiQL.createFetcher() with the cdn bundle, or we can import { createFetcher } from '@graphiql/toolkit'

I would instead recommend using this approach if you are using a CDN bundle:

https://github.com/graphql/graphiql/blob/main/examples/graphiql-cdn/index.html#L60

@brettins this example would be the "out of the box" implementation you are referring to