petitviolet/graphiql.html

## graphiql.html
<!-- https://github.com/howtographql/sangria/blob/master/src/main/resources/graphiql.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="robots" content="noindex" />
    <meta name="referrer" content="origin" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>GraphiQL</title>
    <style>
    #body {
      height: 100vh;
      margin: 0;
      overflow: hidden;
    }
    #splash {
      color: #333;
      display: flex;
      flex-direction: column;
      font-family: system, -apple-system, "San Francisco", ".SFNSDisplay-Regular", "Segoe UI", Segoe, "Segoe WP", "Helvetica Neue", helvetica, "Lucida Grande", arial, sans-serif;
      height: 100vh;
      justify-content: center;
      text-align: center;
    }
    #graphiql {
      height: 100vh;
    }
    .token {
      background: linear-gradient(#f7f7f7, #e2e2e2);
      border-bottom: 1px solid #d0d0d0;
      padding: 7px 14px 6px;
      font-size: 24px;
    }
    .token > input {
      padding-left: 3px;
      font-size: 20px;
      width: 50%;
    }
    .graphiql-container .variable-editor {
      height: 100px;
    }

    </style>


    <link rel="icon" href="favicon.ico">
    <link type="text/css" href="//unpkg.com/graphiql@0.17.0/graphiql.css" rel="stylesheet" />
  </head>
  <body>
    <div class="token">Token <input id="token" class="access-token" placeholder="X-Access-Token" /></div>
    <div id="body">GraphQL container</div>
    <script src="//cdn.jsdelivr.net/es6-promise/4.0.5/es6-promise.auto.min.js"></script>
    <script src="//cdn.jsdelivr.net/react/15.4.2/react.min.js"></script>
    <script src="//cdn.jsdelivr.net/react/15.4.2/react-dom.min.js"></script>
    <script src="//unpkg.com/graphiql@0.17.0/graphiql.min.js"></script>
    <script>
      // Parse the search string to get url parameters.
      var search = window.location.search;
      var parameters = {};
      search.substr(1).split('&').forEach(function (entry) {
        var eq = entry.indexOf('=');
        if (eq >= 0) {
          parameters[decodeURIComponent(entry.slice(0, eq))] =
            decodeURIComponent(entry.slice(eq + 1));
        }
      });

      // if variables was provided, try to format it.
      if (parameters.variables) {
        try {
          parameters.variables =
            JSON.stringify(JSON.parse(parameters.variables), null, 2);
        } catch (e) {
          // Do nothing, we want to display the invalid JSON as a string, rather
          // than present an error.
        }
      }

      // When the query and variables string is edited, update the URL bar so
      // that it can be easily shared
      function onEditQuery(newQuery) {
        parameters.query = newQuery;
        updateURL();
      }
      function onEditVariables(newVariables) {
        parameters.variables = newVariables;
        updateURL();
      }
      function onEditOperationName(newOperationName) {
        parameters.operationName = newOperationName;
        updateURL();
      }
      function updateURL() {
        var newSearch = '?' + Object.keys(parameters).filter(function (key) {
        return Boolean(parameters[key]);
      }).map(function (key) {
        return encodeURIComponent(key) + '=' +
          encodeURIComponent(parameters[key]);
      }).join('&');
        history.replaceState(null, null, newSearch);
      }

      function accessToken() {
        var prm_token = encodeURIComponent(parameters.token);
        var input_token = document.getElementById('token');
        var token = null;
        if (input_token && input_token.value) {
          token = input_token.value;
        } else {
          token = prm_token;
        }
        console.log(`AccessToken: ${token}`);
        return token;
      }

      function graphQLFetcher(graphQLParams) {
        // This example expects a GraphQL server at the path /graphql.
        // Change this to point wherever you host your GraphQL server.
        return fetch('/graphql', {
          method: 'post',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'X-Access-Token': accessToken(),
          },
          body: JSON.stringify(graphQLParams),
          credentials: 'include',
        }).then(function (response) {
          return response.text();
        }).then(function (responseBody) {
          try {
            return JSON.parse(responseBody);
          } catch (error) {
            return responseBody;
          }
        });
      }
      // Render <GraphiQL /> into the body.
      ReactDOM.render(
        React.createElement(GraphiQL, {
          fetcher: graphQLFetcher,
          query: parameters.query,
          variables: parameters.variables,
          operationName: parameters.operationName,
          onEditQuery: onEditQuery,
          onEditVariables: onEditVariables,
          onEditOperationName: onEditOperationName
        }),
        document.getElementById('body'),
      );
    </script>
  </body>
</html>
	<!-- https://github.com/howtographql/sangria/blob/master/src/main/resources/graphiql.html -->
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<meta name="robots" content="noindex" />
	<meta name="referrer" content="origin" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>GraphiQL</title>
	<style>
	#body {
	height: 100vh;
	margin: 0;
	overflow: hidden;
	}
	#splash {
	color: #333;
	display: flex;
	flex-direction: column;
	font-family: system, -apple-system, "San Francisco", ".SFNSDisplay-Regular", "Segoe UI", Segoe, "Segoe WP", "Helvetica Neue", helvetica, "Lucida Grande", arial, sans-serif;
	height: 100vh;
	justify-content: center;
	text-align: center;
	}
	#graphiql {
	height: 100vh;
	}
	.token {
	background: linear-gradient(#f7f7f7, #e2e2e2);
	border-bottom: 1px solid #d0d0d0;
	padding: 7px 14px 6px;
	font-size: 24px;
	}
	.token > input {
	padding-left: 3px;
	font-size: 20px;
	width: 50%;
	}
	.graphiql-container .variable-editor {
	height: 100px;
	}

	</style>


	<link rel="icon" href="favicon.ico">
	<link type="text/css" href="//unpkg.com/graphiql@0.17.0/graphiql.css" rel="stylesheet" />
	</head>
	<body>
	<div class="token">Token <input id="token" class="access-token" placeholder="X-Access-Token" /></div>
	<div id="body">GraphQL container</div>
	<script src="//cdn.jsdelivr.net/es6-promise/4.0.5/es6-promise.auto.min.js"></script>
	<script src="//cdn.jsdelivr.net/react/15.4.2/react.min.js"></script>
	<script src="//cdn.jsdelivr.net/react/15.4.2/react-dom.min.js"></script>
	<script src="//unpkg.com/graphiql@0.17.0/graphiql.min.js"></script>
	<script>
	// Parse the search string to get url parameters.
	var search = window.location.search;
	var parameters = {};
	search.substr(1).split('&').forEach(function (entry) {
	var eq = entry.indexOf('=');
	if (eq >= 0) {
	parameters[decodeURIComponent(entry.slice(0, eq))] =
	decodeURIComponent(entry.slice(eq + 1));
	}
	});

	// if variables was provided, try to format it.
	if (parameters.variables) {
	try {
	parameters.variables =
	JSON.stringify(JSON.parse(parameters.variables), null, 2);
	} catch (e) {
	// Do nothing, we want to display the invalid JSON as a string, rather
	// than present an error.
	}
	}

	// When the query and variables string is edited, update the URL bar so
	// that it can be easily shared
	function onEditQuery(newQuery) {
	parameters.query = newQuery;
	updateURL();
	}
	function onEditVariables(newVariables) {
	parameters.variables = newVariables;
	updateURL();
	}
	function onEditOperationName(newOperationName) {
	parameters.operationName = newOperationName;
	updateURL();
	}
	function updateURL() {
	var newSearch = '?' + Object.keys(parameters).filter(function (key) {
	return Boolean(parameters[key]);
	}).map(function (key) {
	return encodeURIComponent(key) + '=' +
	encodeURIComponent(parameters[key]);
	}).join('&');
	history.replaceState(null, null, newSearch);
	}

	function accessToken() {
	var prm_token = encodeURIComponent(parameters.token);
	var input_token = document.getElementById('token');
	var token = null;
	if (input_token && input_token.value) {
	token = input_token.value;
	} else {
	token = prm_token;
	}
	console.log(`AccessToken: ${token}`);
	return token;
	}

	function graphQLFetcher(graphQLParams) {
	// This example expects a GraphQL server at the path /graphql.
	// Change this to point wherever you host your GraphQL server.
	return fetch('/graphql', {
	method: 'post',
	headers: {
	'Accept': 'application/json',
	'Content-Type': 'application/json',
	'X-Access-Token': accessToken(),
	},
	body: JSON.stringify(graphQLParams),
	credentials: 'include',
	}).then(function (response) {
	return response.text();
	}).then(function (responseBody) {
	try {
	return JSON.parse(responseBody);
	} catch (error) {
	return responseBody;
	}
	});
	}
	// Render <GraphiQL /> into the body.
	ReactDOM.render(
	React.createElement(GraphiQL, {
	fetcher: graphQLFetcher,
	query: parameters.query,
	variables: parameters.variables,
	operationName: parameters.operationName,
	onEditQuery: onEditQuery,
	onEditVariables: onEditVariables,
	onEditOperationName: onEditOperationName
	}),
	document.getElementById('body'),
	);
	</script>
	</body>
	</html>