boschDev/graphiql.html

## 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>SWAPI GraphQL API</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;
        }
    </style>
    <link href="//cdn.jsdelivr.net/npm/graphiql@0.11.11/graphiql.css" rel="stylesheet" />
</head>
<body>
<div id="splash">
    Loading&hellip;
</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="//cdn.jsdelivr.net/npm/graphiql@0.11.11/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 graphQLFetcher(graphQLParams) {
        return fetch(location.pathname, {
            method: 'post',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(graphQLParams),
            credentials: 'include',
        }).then(response  => response.json());
    }

    // 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.body,
    );
</script>
</body>
</html>

## index.js

module.exports = function createGraphQLRouter(callback) {
    const createGraphQLRouter = require('@arangodb/foxx/graphql');
    const router = require('@arangodb/foxx/router')();

    router.get('/', (req, res) => {
        let config = callback(req, res);
        if (!config.graphiql) {
            return res.status(404).send('');
        }
        res.sendFile(__dirname + '/graphiql.html');
    });

    module.context.use(router);
    module.context.use(createGraphQLRouter((req, res) => {
        return callback(req, res);
    }));
};

	<!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>SWAPI GraphQL API</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;
	}
	</style>
	<link href="//cdn.jsdelivr.net/npm/graphiql@0.11.11/graphiql.css" rel="stylesheet" />
	</head>
	<body>
	<div id="splash">
	Loading…
	</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="//cdn.jsdelivr.net/npm/graphiql@0.11.11/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 graphQLFetcher(graphQLParams) {
	return fetch(location.pathname, {
	method: 'post',
	headers: {
	'Accept': 'application/json',
	'Content-Type': 'application/json'
	},
	body: JSON.stringify(graphQLParams),
	credentials: 'include',
	}).then(response => response.json());
	}

	// 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.body,
	);
	</script>
	</body>
	</html>

	module.exports = function createGraphQLRouter(callback) {
	const createGraphQLRouter = require('@arangodb/foxx/graphql');
	const router = require('@arangodb/foxx/router')();

	router.get('/', (req, res) => {
	let config = callback(req, res);
	if (!config.graphiql) {
	return res.status(404).send('');
	}
	res.sendFile(__dirname + '/graphiql.html');
	});

	module.context.use(router);
	module.context.use(createGraphQLRouter((req, res) => {
	return callback(req, res);
	}));
	};