eugene1g/graphiql-latest.html

## graphiql-latest.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>GraphiQL</title>
    <meta name="robots" content="noindex" />
    <style>
        html, body {
            height: 100%;
            margin: 0;
            overflow: hidden;
            width: 100%;
        }
    </style>
    <link href="//unpkg.com/graphiql/graphiql.css" rel="stylesheet" />
    <script src="//unpkg.com/whatwg-fetch"></script>
    <script src="//unpkg.com/react/dist/react.min.js"></script>
    <script src="//unpkg.com/react-dom/dist/react-dom.min.js"></script>
    <script src="//unpkg.com/graphiql/graphiql.min.js"></script>
</head>
<body>
<script>

    function safeSerialize(data) {
        return data ? JSON.stringify(data).replace(/\//g, '\\/') : null;
    }
    // Collect the URL parameters
    var parameters = {};
    window.location.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));
        }
    });
    // Produce a Location query string from a parameter object.
    function locationQuery(params, location) {
        return (location ? location: '') + '?' + Object.keys(params).map(function (key) {
                    return encodeURIComponent(key) + '=' +
                            encodeURIComponent(params[key]);
                }).join('&');
    }
    // Derive a fetch URL from the current URL, sans the GraphQL parameters.
    var graphqlParamNames = {
        query: true,
        variables: true,
        operationName: true
    };
    var otherParams = {};
    for (var k in parameters) {
        if (parameters.hasOwnProperty(k) && graphqlParamNames[k] !== true) {
            otherParams[k] = parameters[k];
        }
    }
    // We don't use safe-serialize for location, becuase it's not client input.
//    var fetchURL = locationQuery(otherParams, '${endpointURL}');
    var fetchURL = locationQuery(otherParams, '/graphql');
    // Defines a GraphQL fetcher using the fetch API.
    function graphQLFetcher(graphQLParams) {
        return fetch(fetchURL, {
            method: 'post',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(graphQLParams),
            credentials: 'include',
        }).then(function (response) {
            return response.text();
        }).then(function (responseBody) {
            try {
                return JSON.parse(responseBody);
            } catch (error) {
                return responseBody;
            }
        });
    }
    // 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() {
        history.replaceState(null, null, locationQuery(parameters));
    }
    // Render <GraphiQL /> into the body.
    ReactDOM.render(
            React.createElement(GraphiQL, {
                fetcher: graphQLFetcher,
                onEditQuery: onEditQuery,
                onEditVariables: onEditVariables,
                onEditOperationName: onEditOperationName,
                query: parameters.query,
                response: safeSerialize(null), //${safeSerialize(resultString)},
                variables: parameters.variables || "{}", //"{}",//${safeSerialize(variablesString)},
                operationName: parameters.operationName === 'null' ? null: parameters.operationName
            }),
            document.body
    );
</script>
</body>
</html>

## hapi-config.js
// Enable GraphiQL in Hapi
server.route({
  method: 'GET',
  path: '/graphiql',
  handler: function (request, reply) {
    return reply.file(__dirname + '/../resources/graphiql-latest.html');
  }
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>GraphiQL</title>
	<meta name="robots" content="noindex" />
	<style>
	html, body {
	height: 100%;
	margin: 0;
	overflow: hidden;
	width: 100%;
	}
	</style>
	<link href="//unpkg.com/graphiql/graphiql.css" rel="stylesheet" />
	<script src="//unpkg.com/whatwg-fetch"></script>
	<script src="//unpkg.com/react/dist/react.min.js"></script>
	<script src="//unpkg.com/react-dom/dist/react-dom.min.js"></script>
	<script src="//unpkg.com/graphiql/graphiql.min.js"></script>
	</head>
	<body>
	<script>

	function safeSerialize(data) {
	return data ? JSON.stringify(data).replace(/\//g, '\\/') : null;
	}
	// Collect the URL parameters
	var parameters = {};
	window.location.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));
	}
	});
	// Produce a Location query string from a parameter object.
	function locationQuery(params, location) {
	return (location ? location: '') + '?' + Object.keys(params).map(function (key) {
	return encodeURIComponent(key) + '=' +
	encodeURIComponent(params[key]);
	}).join('&');
	}
	// Derive a fetch URL from the current URL, sans the GraphQL parameters.
	var graphqlParamNames = {
	query: true,
	variables: true,
	operationName: true
	};
	var otherParams = {};
	for (var k in parameters) {
	if (parameters.hasOwnProperty(k) && graphqlParamNames[k] !== true) {
	otherParams[k] = parameters[k];
	}
	}
	// We don't use safe-serialize for location, becuase it's not client input.
	// var fetchURL = locationQuery(otherParams, '${endpointURL}');
	var fetchURL = locationQuery(otherParams, '/graphql');
	// Defines a GraphQL fetcher using the fetch API.
	function graphQLFetcher(graphQLParams) {
	return fetch(fetchURL, {
	method: 'post',
	headers: {
	'Accept': 'application/json',
	'Content-Type': 'application/json'
	},
	body: JSON.stringify(graphQLParams),
	credentials: 'include',
	}).then(function (response) {
	return response.text();
	}).then(function (responseBody) {
	try {
	return JSON.parse(responseBody);
	} catch (error) {
	return responseBody;
	}
	});
	}
	// 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() {
	history.replaceState(null, null, locationQuery(parameters));
	}
	// Render <GraphiQL /> into the body.
	ReactDOM.render(
	React.createElement(GraphiQL, {
	fetcher: graphQLFetcher,
	onEditQuery: onEditQuery,
	onEditVariables: onEditVariables,
	onEditOperationName: onEditOperationName,
	query: parameters.query,
	response: safeSerialize(null), //${safeSerialize(resultString)},
	variables: parameters.variables \|\| "{}", //"{}",//${safeSerialize(variablesString)},
	operationName: parameters.operationName === 'null' ? null: parameters.operationName
	}),
	document.body
	);
	</script>
	</body>
	</html>
	// Enable GraphiQL in Hapi
	server.route({
	method: 'GET',
	path: '/graphiql',
	handler: function (request, reply) {
	return reply.file(__dirname + '/../resources/graphiql-latest.html');
	}
	});