Graphiql: Request headers are cleaned

Created on 25 Jun 2020  路  12Comments  路  Source: graphql/graphiql

In the following code, according to the documentation, request headers should be persisted, but they are cleaned after page is refreshed.

<!DOCTYPE html>
<html>
<head>
    <link href="https://unpkg.com/graphiql/graphiql.min.css" rel="stylesheet"/>
</head>
<body style="margin: 0;">
<div id="graphiql" style="height: 100vh;"></div>
<script crossorigin src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://unpkg.com/graphiql/graphiql.min.js"></script>
<script>
      function graphQLFetcher(graphQLParams, opts = {headers: {}}) {
        return fetch(
          '/api',
          {
            method: 'post',
            headers: {
              Accept: 'application/json',
              'Content-Type': 'application/json',
              ...opts.headers
            },
            body: JSON.stringify(graphQLParams),
            credentials: 'omit',
          },
        ).then(function (response) {
          return response.json().catch(function () {
            return response.text();
          });
        });
      }

      ReactDOM.render(
        React.createElement(GraphiQL, {
          fetcher: graphQLFetcher,
          headerEditorEnabled: true,
        }),
        document.getElementById('graphiql'),
      );
</script>
</body>
</html>

headers: an optional GraphQL string to use as the initial displayed request headers, if undefined is provided, the stored headers will be used.

bug good first issue
Source
picture majkrzak

Most helpful comment

hey @majkrzak, there is a prop shouldPersistHeaders you should enable that to persist your headers.

picture harshithpabbati on 25 Jun 2020
👍2

All 12 comments

hey @majkrzak, there is a prop shouldPersistHeaders you should enable that to persist your headers.

harshithpabbati picture harshithpabbati on 25 Jun 2020
👍2

@harshithpabbati thx, so it seems docs should be updated

majkrzak picture majkrzak on 25 Jun 2020

yes, @majkrzak we made that opt-in for security purposes

acao picture acao on 25 Jun 2020

@harshithpabbati can you make an update to the docs for this since I'm deep in on 2.0.0? note this in both the headers prop description and another entry for this prop?

acao picture acao on 25 Jun 2020

sure @acao, I will update the docs.

harshithpabbati picture harshithpabbati on 25 Jun 2020

shouldPersistHeaders works, but I wonder if would it be possible for headers option to be treated as default when nothing is stored? Currently it always override it.

majkrzak picture majkrzak on 25 Jun 2020
👍1

@harshithpabbati or @secmohammed need a PR to 1.0.0 branch to fix this bug before next release, please let general channel know who picks it up first

acao picture acao on 29 Jun 2020

hello @majkrzak, If it's possible can you please demonstrate how it's always being overridden?, I would be grateful if you drop a snippet here of how you initialize graphiql, and explain your scenario to clarify when exactly it's overridden.

secmohammed picture secmohammed on 1 Jul 2020

@secmohammed the user provides said snippet in the initial issue!

acao picture acao on 1 Jul 2020

@acao It doesn't show how actually it overrides. We have taken a look at the graphiql, and there is nothing seem to be wrong, that's why I wanted a more clarified scenario, or what he is actually doing to face this issue

secmohammed picture secmohammed on 1 Jul 2020

@acao @secmohammed
Original snippet was referring to the change in the behaviour that was not reflected in the docs. Then after being explained, I've checked how it behaves when shouldPersistHeaders is set together with headers and it seems that headers are not used as default but override stored once. So I suggest to treat it as default :shrug: 

<!DOCTYPE html>
<html>
<head>
    <link href="https://unpkg.com/graphiql/graphiql.min.css" rel="stylesheet"/>
</head>
<body style="margin: 0;">
<div id="graphiql" style="height: 100vh;"></div>
<script crossorigin src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://unpkg.com/graphiql/graphiql.min.js"></script>
<script>
      function graphQLFetcher(graphQLParams, opts = {headers: {}}) {
        return fetch(
          '/api',
          {
            method: 'post',
            headers: {
              Accept: 'application/json',
              'Content-Type': 'application/json',
              ...opts.headers
            },
            body: JSON.stringify(graphQLParams),
            credentials: 'omit',
          },
        ).then(function (response) {
          return response.json().catch(function () {
            return response.text();
          });
        });
      }

      ReactDOM.render(
        React.createElement(GraphiQL, {
          fetcher: graphQLFetcher,
          headerEditorEnabled: true,
          shouldPersistHeaders: true,
          headers: '{"this field":"will be used always instead of stored headers"}'
        }),
        document.getElementById('graphiql'),
      );
</script>
</body>
</html>
majkrzak picture majkrzak on 1 Jul 2020

@acao @secmohammed
Original snippet was referring to the change in the behaviour that was not reflected in the docs. Then after being explained, I've checked how it behaves when shouldPersistHeaders is set together with headers and it seems that headers are not used as default but override stored once. So I suggest to treat it as default 馃し

<!DOCTYPE html>
<html>
<head>
    <link href="https://unpkg.com/graphiql/graphiql.min.css" rel="stylesheet"/>
</head>
<body style="margin: 0;">
<div id="graphiql" style="height: 100vh;"></div>
<script crossorigin src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://unpkg.com/graphiql/graphiql.min.js"></script>
<script>
      function graphQLFetcher(graphQLParams, opts = {headers: {}}) {
        return fetch(
          '/api',
          {
            method: 'post',
            headers: {
              Accept: 'application/json',
              'Content-Type': 'application/json',
              ...opts.headers
            },
            body: JSON.stringify(graphQLParams),
            credentials: 'omit',
          },
        ).then(function (response) {
          return response.json().catch(function () {
            return response.text();
          });
        });
      }

      ReactDOM.render(
        React.createElement(GraphiQL, {
          fetcher: graphQLFetcher,
          headerEditorEnabled: true,
          shouldPersistHeaders: true,
          headers: '{"this field":"will be used always instead of stored headers"}'
        }),
        document.getElementById('graphiql'),
      );
</script>
</body>
</html>

Hey @majkrzak, I understood your point but then there is no use of having a headers tab without shouldPersistHeaders to be true right?

headers: an optional GraphQL string to use as the initial displayed request headers, if undefined is provided, the stored headers will be used.

Also in the documentation it is provided that it will be used as initial displayed request headers.

Hope you got my point.

harshithpabbati picture harshithpabbati on 6 Jul 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

dontsave picture dontsave  路  19Comments
naishe picture naishe  路  10Comments
songololo picture songololo  路  25Comments
Glavin001 picture Glavin001  路  10Comments
intellix picture intellix  路  10Comments