|
17 | 17 | * of patent rights can be found in the PATENTS file in the same directory. |
18 | 18 | */ |
19 | 19 |
|
| 20 | +'use strict' |
| 21 | + |
| 22 | +Object.defineProperty(exports, '__esModule', { |
| 23 | + value: true |
| 24 | +}) |
| 25 | + |
20 | 26 | // Current latest version of GraphiQL. |
21 | | -const GRAPHIQL_VERSION = '0.9.3' |
| 27 | +var GRAPHIQL_VERSION = '0.11.2' |
22 | 28 |
|
23 | 29 | // Ensures string values are safe to be used within a <script> tag. |
| 30 | + |
24 | 31 | function safeSerialize(data) { |
25 | 32 | return data ? JSON.stringify(data).replace(/\//g, '\\/') : 'undefined' |
26 | 33 | } |
27 | 34 |
|
28 | 35 | /** |
29 | | - * When the server receives a request which does not Accept JSON, but does |
| 36 | + * When express-graphql receives a request which does not Accept JSON, but does |
30 | 37 | * Accept HTML, it may present GraphiQL, the in-browser GraphQL explorer IDE. |
31 | 38 | * |
32 | 39 | * When shown, it will be pre-populated with the result of having executed the |
33 | 40 | * requested query. |
34 | 41 | */ |
35 | 42 | module.exports = function renderGraphiQL(data) { |
36 | | - const queryString = data.query |
37 | | - const variablesString = data.variables ? JSON.stringify(data.variables, null, 2) : null |
38 | | - const resultString = data.result ? JSON.stringify(data.result, null, 2) : null |
39 | | - const operationName = data.operationName |
| 43 | + var queryString = data.query |
| 44 | + var variablesString = data.variables ? JSON.stringify(data.variables, null, 2) : null |
| 45 | + var resultString = data.result ? JSON.stringify(data.result, null, 2) : null |
| 46 | + var operationName = data.operationName |
40 | 47 |
|
41 | 48 | /* eslint-disable max-len */ |
42 | | - return `<!-- |
43 | | -The request to this GraphQL server provided the header "Accept: text/html" |
44 | | -and as a result has been presented GraphiQL - an in-browser IDE for |
45 | | -exploring GraphQL. |
46 | | -
|
47 | | -If you wish to receive JSON, provide the header "Accept: application/json" or |
48 | | -add "&raw" to the end of the URL within a browser. |
49 | | ---> |
50 | | -<!DOCTYPE html> |
51 | | -<html> |
52 | | -<head> |
53 | | - <meta charset="utf-8" /> |
54 | | - <title>GraphiQL</title> |
55 | | - <meta name="robots" content="noindex" /> |
56 | | - <style> |
57 | | - html, body { |
58 | | - height: 100%; |
59 | | - margin: 0; |
60 | | - overflow: hidden; |
61 | | - width: 100%; |
62 | | - } |
63 | | - </style> |
64 | | - <link href="//cdn.jsdelivr.net/graphiql/${GRAPHIQL_VERSION}/graphiql.css" rel="stylesheet" /> |
65 | | - <script src="//cdn.jsdelivr.net/fetch/0.9.0/fetch.min.js"></script> |
66 | | - <script src="//cdn.jsdelivr.net/react/15.4.2/react.min.js"></script> |
67 | | - <script src="//cdn.jsdelivr.net/react/15.4.2/react-dom.min.js"></script> |
68 | | - <script src="//cdn.jsdelivr.net/graphiql/${GRAPHIQL_VERSION}/graphiql.min.js"></script> |
69 | | -</head> |
70 | | -<body> |
71 | | - <script> |
72 | | - // Collect the URL parameters |
73 | | - var parameters = {}; |
74 | | - window.location.search.substr(1).split('&').forEach(function (entry) { |
75 | | - var eq = entry.indexOf('='); |
76 | | - if (eq >= 0) { |
77 | | - parameters[decodeURIComponent(entry.slice(0, eq))] = |
78 | | - decodeURIComponent(entry.slice(eq + 1)); |
79 | | - } |
80 | | - }); |
81 | | -
|
82 | | - // Produce a Location query string from a parameter object. |
83 | | - function locationQuery(params) { |
84 | | - return '?' + Object.keys(params).map(function (key) { |
85 | | - return encodeURIComponent(key) + '=' + |
86 | | - encodeURIComponent(params[key]); |
87 | | - }).join('&'); |
88 | | - } |
89 | | -
|
90 | | - // Derive a fetch URL from the current URL, sans the GraphQL parameters. |
91 | | - var graphqlParamNames = { |
92 | | - query: true, |
93 | | - variables: true, |
94 | | - operationName: true |
95 | | - }; |
96 | | -
|
97 | | - var otherParams = {}; |
98 | | - for (var k in parameters) { |
99 | | - if (parameters.hasOwnProperty(k) && graphqlParamNames[k] !== true) { |
100 | | - otherParams[k] = parameters[k]; |
101 | | - } |
102 | | - } |
103 | | - var fetchURL = locationQuery(otherParams); |
104 | | - // Defines a GraphQL fetcher using the fetch API. |
105 | | - function graphQLFetcher(graphQLParams) { |
106 | | - return fetch(fetchURL, { |
107 | | - method: 'post', |
108 | | - headers: { |
109 | | - 'Accept': 'application/json', |
110 | | - 'Content-Type': 'application/json' |
111 | | - }, |
112 | | - body: JSON.stringify(graphQLParams), |
113 | | - credentials: 'include', |
114 | | - }).then(function (response) { |
115 | | - return response.text(); |
116 | | - }).then(function (responseBody) { |
117 | | - try { |
118 | | - return JSON.parse(responseBody); |
119 | | - } catch (error) { |
120 | | - console.log(error); |
121 | | - return responseBody; |
122 | | - } |
123 | | - }); |
124 | | - } |
125 | | - // When the query and variables string is edited, update the URL bar so |
126 | | - // that it can be easily shared. |
127 | | - function onEditQuery(newQuery) { |
128 | | - parameters.query = newQuery; |
129 | | - updateURL(); |
130 | | - } |
131 | | -
|
132 | | - function onEditVariables(newVariables) { |
133 | | - parameters.variables = newVariables; |
134 | | - updateURL(); |
135 | | - } |
136 | | -
|
137 | | - function onEditOperationName(newOperationName) { |
138 | | - parameters.operationName = newOperationName; |
139 | | - updateURL(); |
140 | | - } |
141 | | -
|
142 | | - function updateURL() { |
143 | | - history.replaceState(null, null, locationQuery(parameters)); |
144 | | - } |
145 | | -
|
146 | | - // Render <GraphiQL /> into the body. |
147 | | - ReactDOM.render( |
148 | | - React.createElement(GraphiQL, { |
149 | | - fetcher: graphQLFetcher, |
150 | | - onEditQuery: onEditQuery, |
151 | | - onEditVariables: onEditVariables, |
152 | | - onEditOperationName: onEditOperationName, |
153 | | - query: ${safeSerialize(queryString)}, |
154 | | - response: ${safeSerialize(resultString)}, |
155 | | - variables: ${safeSerialize(variablesString)}, |
156 | | - operationName: ${safeSerialize(operationName)}, |
157 | | - }), |
158 | | - document.body |
159 | | - ); |
160 | | - </script> |
161 | | -</body> |
162 | | -</html>` |
| 49 | + 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>' |
163 | 50 | } |
0 commit comments