github.com/gramework/gramework@v1.8.1-0.20231027140105-82555c9057f5/graphiql/graphiql.go (about)

     1  package graphiql
     2  
     3  import "github.com/gramework/gramework"
     4  
     5  const (
     6  	// PackageVersion defines graphiql package version
     7  	// from npm, which we'll use in our unpkg.com links
     8  	PackageVersion = "0.11.11"
     9  )
    10  
    11  // Handler serves standalone graphiql HTML.
    12  func Handler(ctx *gramework.Context) {
    13  	if _, err := ctx.HTML().WriteString(tpl); err != nil {
    14  		ctx.Logger.WithError(err).WithField("package", "mw/graphiql").Error("could not send template")
    15  	}
    16  }
    17  
    18  const tpl = `<!--
    19  *   Copyright (c) Facebook, Inc.
    20  *   All rights reserved.
    21  *
    22  *   Modified by Kirill Danshin <kirill@danshin.pro>: replaced graphiql.js and graphiql.css links
    23  *   with unpkg.com links
    24  *
    25  *   This source code is licensed under the license found in the
    26  *   LICENSE file in the root directory of graphiql source tree.
    27  -->
    28  <!DOCTYPE html>
    29  <html>
    30  <head>
    31  	<style>
    32  		body {
    33  			height: 100%;
    34  			margin: 0;
    35  			width: 100%;
    36  			overflow: hidden;
    37  		}
    38  		#graphiql {
    39  			height: 100vh;
    40  		}
    41  	</style>
    42  
    43  	<script src="//cdn.jsdelivr.net/es6-promise/4.0.5/es6-promise.auto.min.js"></script>
    44  	<script src="//cdn.jsdelivr.net/fetch/0.9.0/fetch.min.js"></script>
    45  	<script src="//cdn.jsdelivr.net/react/15.4.2/react.min.js"></script>
    46  	<script src="//cdn.jsdelivr.net/react/15.4.2/react-dom.min.js"></script>
    47  
    48  	<link rel="stylesheet" href="https://unpkg.com/graphiql@` + PackageVersion + `/graphiql.css" />
    49  	<script src="https://unpkg.com/graphiql@` + PackageVersion + `/graphiql.js"></script>
    50  
    51  </head>
    52  <body>
    53  	<div id="graphiql">Loading...</div>
    54  	<script>
    55  
    56  	/**
    57  	 * This GraphiQL example illustrates how to use some of GraphiQL's props
    58  	 * in order to enable reading and updating the URL parameters, making
    59  	 * link sharing of queries a little bit easier.
    60  	 *
    61  	 * This is only one example of this kind of feature, GraphiQL exposes
    62  	 * various React params to enable interesting integrations.
    63  	 */
    64  
    65  	// Parse the search string to get url parameters.
    66  	const search = window.location.search;
    67  	const parameters = {};
    68  	search.substr(1).split('&').forEach(function (entry) {
    69  		const eq = entry.indexOf('=');
    70  		if (eq >= 0) {
    71  			parameters[decodeURIComponent(entry.slice(0, eq))] =
    72  			decodeURIComponent(entry.slice(eq + 1));
    73  		}
    74  	});
    75  
    76  	// if variables was provided, try to format it.
    77  	if (parameters.variables) {
    78  		try {
    79  			parameters.variables = JSON.stringify(JSON.parse(parameters.variables), null, 2);
    80  		} catch (e) {
    81  			// Do nothing, we want to display the invalid JSON as a string, rather
    82  			// than present an error.
    83  		}
    84  	}
    85  
    86  	// When the query and variables string is edited, update the URL bar so
    87  	// that it can be easily shared
    88  	function onEditQuery(newQuery) {
    89  		parameters.query = newQuery;
    90  		updateURL();
    91  	}
    92  
    93  	function onEditVariables(newVariables) {
    94  		parameters.variables = newVariables;
    95  		updateURL();
    96  	}
    97  
    98  	function onEditOperationName(newOperationName) {
    99  		parameters.operationName = newOperationName;
   100  		updateURL();
   101  	}
   102  
   103  	function updateURL() {
   104  		var newSearch = '?' + Object.keys(parameters).filter(function (key) {
   105  			return Boolean(parameters[key]);
   106  		}).map(function (key) {
   107  			return encodeURIComponent(key) + '=' +
   108  			encodeURIComponent(parameters[key]);
   109  		}).join('&');
   110  		history.replaceState(null, null, newSearch);
   111  	}
   112  
   113  	// Defines a GraphQL fetcher using the fetch API. You're not required to
   114  	// use fetch, and could instead implement graphQLFetcher however you like,
   115  	// as long as it returns a Promise or Observable.
   116  	function graphQLFetcher(graphQLParams) {
   117  		// This example expects a GraphQL server at the path /graphql.
   118  		// Change this to point wherever you host your GraphQL server.
   119  		return fetch('/graphql', {
   120  			method: 'post',
   121  			headers: {
   122  			'Accept': 'application/json',
   123  			'Content-Type': 'application/json',
   124  			},
   125  			body: JSON.stringify(graphQLParams),
   126  			credentials: 'include',
   127  		}).then(function (response) {
   128  			return response.text();
   129  		}).then(function (responseBody) {
   130  			try {
   131  			return JSON.parse(responseBody);
   132  			} catch (error) {
   133  			return responseBody;
   134  			}
   135  		});
   136  	}
   137  
   138  	// Render <GraphiQL /> into the body.
   139  	// See the README in the top level of this module to learn more about
   140  	// how you can customize GraphiQL by providing different values or
   141  	// additional child elements.
   142  	ReactDOM.render(
   143  		React.createElement(GraphiQL, {
   144  			fetcher: graphQLFetcher,
   145  			query: parameters.query,
   146  			variables: parameters.variables,
   147  			operationName: parameters.operationName,
   148  			onEditQuery: onEditQuery,
   149  			onEditVariables: onEditVariables,
   150  			onEditOperationName: onEditOperationName
   151  		}),
   152  		document.getElementById('graphiql')
   153  	);
   154  	</script>
   155  </body>
   156  </html>`