feat: Add support to customize the graphiql interface

Author: nicolasdao

LICENSE

@@ -1,30 +1,24 @@
-BSD License
+Copyright (c) 2018, Neap pty ltd.
+All rights reserved.
 
-For google-graphql-functions software
-
-Copyright (c) 2017, Neap pty ltd. All rights reserved.
-
-Redistribution and use in source and binary forms, with or without modification,
-are permitted provided that the following conditions are met:
-
- * Redistributions of source code must retain the above copyright notice, this
-   list of conditions and the following disclaimer.
-
- * Redistributions in binary form must reproduce the above copyright notice,
-   this list of conditions and the following disclaimer in the documentation
-   and/or other materials provided with the distribution.
-
- * Neither the name Facebook nor the names of its contributors may be used to
-   endorse or promote products derived from this software without specific
-   prior written permission.
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+    * Redistributions of source code must retain the above copyright
+      notice, this list of conditions and the following disclaimer.
+    * Redistributions in binary form must reproduce the above copyright
+      notice, this list of conditions and the following disclaimer in the
+      documentation and/or other materials provided with the distribution.
+    * Neither the name of Neap nor the
+      names of its contributors may be used to endorse or promote products
+      derived from this software without specific prior written permission.
 
 THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
-DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
-ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+DISCLAIMED. IN NO EVENT SHALL NEAP PTY LTD BE LIABLE FOR ANY
+DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
-LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
-ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
-SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

README.md

@@ -15,6 +15,11 @@ npm install; \
 npm start 
 ```
 
+This will serve 2 endpoints:
+
+- [http://localhost:4000](http://localhost:4000): This is the GraphQL endpoint that your client can start querying.
+- [http://localhost:4000/graphiql](http://localhost:4000/graphiql): This is the GraphiQL Web UI that you can use to test and query your GraphQL server. 
+
 Deploying that api to [Zeit Now](https://zeit.co/now) will take between 15 seconds to 1.5 minute (depending on whether you need to login/creating a free Zeit account or not).
 
 _If you haven't installed Zeit now-CLI yet or you need to login/create an account, then copy/paste this in your terminal:_

src/index.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2017, Neap pty ltd.
+ * Copyright (c) 2018, Neap pty ltd.
  * All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the
@@ -23,7 +23,7 @@ const httpError = require('http-errors')
 const url = require('url')
 
 const parseBody = require('./parseBody')
-const renderGraphiQL = require('./renderGraphiQL')
+const { renderGraphiQL } = require('./renderGraphiQL')
 
 const graphqlHandler = options => {
 	if (!options)
@@ -64,6 +64,7 @@ function graphqlHTTP(options) {
 		let validationRules
 		let endpointURL
 		let schemaAST
+		let graphiQlOptions
 
 		// Promises are used as a mechanism for capturing any thrown errors during
 		// the asynchronous process below.
@@ -101,6 +102,7 @@ function graphqlHTTP(options) {
 			extensionsFn = optionsData.extensions
 			endpointURL = optionsData.endpointURL
 			schemaAST = optionsData.schemaAST
+			graphiQlOptions = optionsData.graphiQlOptions
 
 			validationRules = graphql.specifiedRules
 			if (optionsData.validationRules) {
@@ -233,7 +235,7 @@ function graphqlHTTP(options) {
 			}
 			// If allowed to show GraphiQL, present it instead of JSON.
 			if (showGraphiQL) {
-				const payload = renderGraphiQL({ query, variables, operationName, result, schemaAST })
+				const payload = renderGraphiQL({ query, variables, operationName, result, schemaAST }, graphiQlOptions)
 				response.setHeader('Content-Type', 'text/html; charset=utf-8')
 				sendResponse(response, payload)
 			} else {
@@ -264,7 +266,7 @@ function getGraphQLParams(request) {
  */
 function parseGraphQLParams(urlData, bodyData) {
 	// GraphQL Query string.
-	let query = urlData.query || bodyData.query
+	let query = bodyData.query || urlData.query
 	if (typeof query !== 'string') {
 		query = null
 	}
@@ -282,7 +284,7 @@ function parseGraphQLParams(urlData, bodyData) {
 	}
 
 	// Name of GraphQL operation to execute.
-	let operationName = urlData.operationName || bodyData.operationName
+	let operationName = bodyData.operationName || urlData.operationName
 	if (typeof operationName !== 'string') {
 		operationName = null
 	}

src/parseBody.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2017, Neap pty ltd.
+ * Copyright (c) 2018, Neap pty ltd.
  * All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the

src/renderGraphiQL.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2017, Neap pty ltd.
+ * Copyright (c) 2018, Neap pty ltd.
  * All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the
@@ -9,12 +9,12 @@
  * This file incorporates work covered by the following copyright and  
  * permission notice:
  *
- *    Copyright (c) 2015, Facebook, Inc.
- *    All rights reserved.
+ *	Copyright (c) 2015, Facebook, Inc.
+ *	All rights reserved.
  *
- *    This source code is licensed under the BSD-style license found in the
- *    LICENSE file in the root directory of this source tree. An additional grant
- *    of patent rights can be found in the PATENTS file in the same directory.
+ *	This source code is licensed under the BSD-style license found in the
+ *	LICENSE file in the root directory of this source tree. An additional grant
+ *	of patent rights can be found in the PATENTS file in the same directory.
  */
 
 'use strict'
@@ -24,27 +24,233 @@ Object.defineProperty(exports, '__esModule', {
 })
 
 // Current latest version of GraphiQL.
-var GRAPHIQL_VERSION = '0.11.2'
+// var GRAPHIQL_VERSION = '0.11.2'
 
 // Ensures string values are safe to be used within a <script> tag.
 
 function safeSerialize(data) {
 	return data ? JSON.stringify(data).replace(/\//g, '\\/') : 'undefined'
 }
 
+const getFuncArgNames = fn => {
+	if (fn && typeof(fn) == 'function') {
+		const fnStr = fn.toString().trim()
+		const arrowFn = fnStr.indexOf('function ') != 0
+		if (arrowFn) {
+			const arrowFnLeft = fnStr.split('=>')[0].trim()
+			// single argument function with no parenthesis (e.g. x => ...)
+			return arrowFnLeft.indexOf('(') != 0 
+				? [arrowFnLeft]
+				// Zero, one or many arguments function (e.g. () => ... or (x) => ... or (x,y,z) => ....)
+				: arrowFnLeft.replace(/\(|\)/g,'').split(',').map(x => x.trim()).filter(x => x)
+		}
+		else
+			return ((fnStr.match(/\((.*?)\)/) || [])[0] || '').replace(/\(|\)/g,'').split(',').map(x => x.trim()).filter(x => x)
+	}
+	else
+		return []
+}
+
+const stringifyFnBody = fn => {
+	if (fn && typeof(fn) == 'function') {
+		const fnStr = fn.toString().trim()
+		const stdFuncStyle = fnStr.indexOf('function ') == 0
+		let body
+		if (stdFuncStyle)
+			body = fnStr.replace(/\s*function\s*(.*?){/,'').trim()
+		else {
+			const arrowFnLeft = fnStr.split('=>')[0].trim()
+			body = arrowFnLeft.indexOf('(') != 0 
+				? fnStr.replace(/(.*?)=>\s*/, '')
+				: fnStr.replace(/^\s*\((.*?)\)\s*=>\s*/, '').trim()
+		}
+
+		const bodyStartsWithCurlyBracket = body.indexOf('{') == 0
+		// Remove trailing curly bracket
+		if (stdFuncStyle || bodyStartsWithCurlyBracket)
+			body = body.replace(/}$/,'')
+
+		// Remove opening curly bracket
+		if (bodyStartsWithCurlyBracket)
+			body = body.replace(/^{/,'')
+
+		return body
+	}
+	else
+		return null
+}
+
+const scriptifyFunc = fn => {
+	const jsCode = stringifyFnBody(fn)
+	return jsCode ? `<script>\n${jsCode}\n</script>` : ''
+}
+
 /**
  * When express-graphql receives a request which does not Accept JSON, but does
  * Accept HTML, it may present GraphiQL, the in-browser GraphQL explorer IDE.
  *
  * When shown, it will be pre-populated with the result of having executed the
  * requested query.
  */
-module.exports = function renderGraphiQL(data) {
+const renderGraphiQL = (data, custom={}) => {
 	var queryString = data.query
 	var variablesString = data.variables ? JSON.stringify(data.variables, null, 2) : null
 	var resultString = data.result ? JSON.stringify(data.result, null, 2) : null
 	var operationName = data.operationName
 
+	const head = custom.head || {}
+	const cssFiles = []
+	const scriptFiles = []
+	cssFiles.push(head.graphiqlCss || '//cdn.jsdelivr.net/npm/graphiql@0.11.2/graphiql.css')
+	scriptFiles.push(head.fetchJs || '//cdn.jsdelivr.net/fetch/0.9.0/fetch.min.js')
+	scriptFiles.push(head.reactJs || '//cdn.jsdelivr.net/react/15.4.2/react.min.js')
+	scriptFiles.push(head.reactDomJs || '//cdn.jsdelivr.net/react/15.4.2/react-dom.min.js')
+	scriptFiles.push(head.graphiqlJs || '//cdn.jsdelivr.net/npm/graphiql@0.11.2/graphiql.min.js')
+
+	const pageTitle = head.title || 'GraphiQL'
+	const customScript = scriptifyFunc(custom.script)
+	const onRequest = stringifyFnBody(custom.onRequest) || 'return headers'
+	const onRequestArgs = getFuncArgNames(custom.onRequest).join(',') || 'headers'
+
+	const headScriptsAndCss = `
+		${head.custom || ''}
+		${cssFiles.map(f => `<link href="${f}"  rel="stylesheet" />`).join('\n		')}
+		${scriptFiles.map(f => `<script src="${f}"></script>`).join('\n		')}`
+
 	/* eslint-disable max-len */
-	return '<!--\nThe request to this GraphQL server provided the header "Accept: text/html"\nand as a result has been presented GraphiQL - an in-browser IDE for\nexploring GraphQL.\n\nIf you wish to receive JSON, provide the header "Accept: application/json" or\nadd "&raw" to the end of the URL within a browser.\n-->\n<!DOCTYPE html>\n<html>\n<head>\n  <meta charset="utf-8" />\n  <title>GraphiQL</title>\n  <meta name="robots" content="noindex" />\n  <style>\n    html, body {\n      height: 100%;\n      margin: 0;\n      overflow: hidden;\n      width: 100%;\n    }\n  </style>\n  <link href="//cdn.jsdelivr.net/npm/graphiql@' + GRAPHIQL_VERSION + '/graphiql.css" rel="stylesheet" />\n  <script src="//cdn.jsdelivr.net/fetch/0.9.0/fetch.min.js"></script>\n  <script src="//cdn.jsdelivr.net/react/15.4.2/react.min.js"></script>\n  <script src="//cdn.jsdelivr.net/react/15.4.2/react-dom.min.js"></script>\n  <script src="//cdn.jsdelivr.net/npm/graphiql@' + GRAPHIQL_VERSION + '/graphiql.min.js"></script>\n</head>\n<body>\n  <script>\n    // Collect the URL parameters\n    var parameters = {};\n    window.location.search.substr(1).split(\'&\').forEach(function (entry) {\n      var eq = entry.indexOf(\'=\');\n      if (eq >= 0) {\n        parameters[decodeURIComponent(entry.slice(0, eq))] =\n          decodeURIComponent(entry.slice(eq + 1));\n      }\n    });\n\n    // Produce a Location query string from a parameter object.\n    function locationQuery(params) {\n      return \'?\' + Object.keys(params).filter(function (key) {\n        return Boolean(params[key]);\n      }).map(function (key) {\n        return encodeURIComponent(key) + \'=\' +\n          encodeURIComponent(params[key]);\n      }).join(\'&\');\n    }\n\n    // Derive a fetch URL from the current URL, sans the GraphQL parameters.\n    var graphqlParamNames = {\n      query: true,\n      variables: true,\n      operationName: true\n    };\n\n    var otherParams = {};\n    for (var k in parameters) {\n      if (parameters.hasOwnProperty(k) && graphqlParamNames[k] !== true) {\n        otherParams[k] = parameters[k];\n      }\n    }\n    var fetchURL = locationQuery(otherParams);\n\n    // Defines a GraphQL fetcher using the fetch API.\n    function graphQLFetcher(graphQLParams) {\n      return fetch(fetchURL, {\n        method: \'post\',\n        headers: {\n          \'Accept\': \'application/json\',\n          \'Content-Type\': \'application/json\'\n        },\n        body: JSON.stringify(graphQLParams),\n        credentials: \'include\',\n      }).then(function (response) {\n        return response.text();\n      }).then(function (responseBody) {\n        try {\n          return JSON.parse(responseBody);\n        } catch (error) {\n          return responseBody;\n        }\n      });\n    }\n\n    // When the query and variables string is edited, update the URL bar so\n    // that it can be easily shared.\n    function onEditQuery(newQuery) {\n      parameters.query = newQuery;\n      updateURL();\n    }\n\n    function onEditVariables(newVariables) {\n      parameters.variables = newVariables;\n      updateURL();\n    }\n\n    function onEditOperationName(newOperationName) {\n      parameters.operationName = newOperationName;\n      updateURL();\n    }\n\n    function updateURL() {\n      history.replaceState(null, null, locationQuery(parameters));\n    }\n\n    // Render <GraphiQL /> into the body.\n    ReactDOM.render(\n      React.createElement(GraphiQL, {\n        fetcher: graphQLFetcher,\n        onEditQuery: onEditQuery,\n        onEditVariables: onEditVariables,\n        onEditOperationName: onEditOperationName,\n        query: ' + safeSerialize(queryString) + ',\n        response: ' + safeSerialize(resultString) + ',\n        variables: ' + safeSerialize(variablesString) + ',\n        operationName: ' + safeSerialize(operationName) + ',\n      }),\n      document.body\n    );\n  </script>\n</body>\n</html>'
+	return `<!--
+	The request to this GraphQL server provided the header "Accept: text/html"
+	and as a result has been presented GraphiQL - an in-browser IDE for
+	exploring GraphQL.
+
+	If you wish to receive JSON, provide the header "Accept: application/json" or
+	add "&raw" to the end of the URL within a browser.
+	-->
+	<!DOCTYPE html>
+	<html>
+	<head>
+		<meta charset="utf-8" />
+		<title>${pageTitle}</title>
+		<meta name="robots" content="noindex" />
+		<style>
+			html, body {
+				height: 100%;
+				margin: 0;
+				overflow: hidden;
+				width: 100%;
+			}
+		</style>
+			${headScriptsAndCss}
+		</head>
+	<body>
+		${customScript}
+		<script>
+			// 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) {
+				return '?' + Object.keys(params).filter(function (key) {
+					return Boolean(params[key]);
+				}).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];
+				}
+			}
+			var fetchURL = locationQuery(otherParams);
+
+			function updateHeaders(${onRequestArgs}) {
+				${onRequest}
+			}
+
+			function getHeaders() {
+				return updateHeaders({
+					'Accept': 'application/json',
+					'Content-Type': 'application/json'
+				})
+			}
+
+			// Defines a GraphQL fetcher using the fetch API.
+			function graphQLFetcher(graphQLParams) {
+				return fetch(fetchURL, {
+					method: 'post',
+					headers: getHeaders(),
+					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: '${safeSerialize(queryString)}',
+				response: '${safeSerialize(resultString)}',
+				variables: '${safeSerialize(variablesString)}',
+				operationName: '${safeSerialize(operationName)}',
+			}),
+			document.body
+			);
+		</script>
+		</body>
+	</html>`
 }
+
+
+module.exports = {
+	renderGraphiQL,
+	stringifyFnBody,
+	getFuncArgNames
+}

test/index.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2017, Neap Pty Ltd.
+ * Copyright (c) 2018, Neap Pty Ltd.
  * All rights reserved.
  * 
  * This source code is licensed under the BSD-style license found in the