Skip to content

Commit 174569c

Browse files
samuelAndalonsamuelAndalon
authored
feat: add explorer and exporter plugins (ExpediaGroup#1626)
1 parent 7493405 commit 174569c

File tree

1 file changed

+108
-50
lines changed

1 file changed

+108
-50
lines changed

‎servers/graphql-kotlin-spring-server/src/main/resources/graphql-graphiql.html

Lines changed: 108 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
1-
<!--
2-
* Copyright (c) 2021 GraphQL Contributors
3-
* All rights reserved.
4-
*
5-
* This source code is licensed under the license found in the
6-
* LICENSE file in the root directory of this source tree.
7-
-->
81
<!DOCTYPE html>
9-
<html>
2+
<html lang="en_US">
3+
104
<head>
5+
<meta charset=utf-8 />
6+
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
7+
<meta name="robots" content="noindex, nofollow, noimageindex, nosnippet">
118
<title>GraphiQL</title>
129
<style>
1310
body {
@@ -22,66 +19,127 @@
2219
}
2320
</style>
2421

25-
<!--
26-
This GraphiQL example depends on Promise and fetch, which are available in
27-
modern browsers, but can be "polyfilled" for older browsers.
28-
GraphiQL itself depends on React DOM.
29-
If you do not want to rely on a CDN, you can host these files locally or
30-
include them directly in your favored resource bundler.
31-
-->
32-
<script
33-
src="https://unpkg.com/react@17/umd/react.development.js"
34-
integrity="sha512-Vf2xGDzpqUOEIKO+X2rgTLWPY+65++WPwCHkX2nFMu9IcstumPsf/uKKRd5prX3wOu8Q0GBylRpsDB26R6ExOg=="
35-
crossorigin="anonymous"
36-
></script>
37-
<script
38-
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
39-
integrity="sha512-Wr9OKCTtq1anK0hq5bY3X/AvDI5EflDSAh0mE9gma+4hl+kXdTJPKZ3TwLMBcrgUeoY0s3dq9JjhCQc7vddtFg=="
40-
crossorigin="anonymous"
41-
></script>
42-
43-
<!--
44-
These two files can be found in the npm module, however you may wish to
45-
copy them directly into your environment, or perhaps include them in your
46-
favored resource bundler.
47-
-->
4822
<link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
23+
<link rel="stylesheet" href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css" />
24+
<link rel="stylesheet" href="https://unpkg.com/@graphiql/plugin-code-exporter/dist/style.css" />
4925
</head>
5026

5127
<body>
5228
<div id="graphiql">Loading...</div>
53-
<script
54-
src="https://unpkg.com/graphiql/graphiql.min.js"
29+
30+
<script src="https://unpkg.com/react@17/umd/react.development.js"
31+
integrity="sha512-Vf2xGDzpqUOEIKO+X2rgTLWPY+65++WPwCHkX2nFMu9IcstumPsf/uKKRd5prX3wOu8Q0GBylRpsDB26R6ExOg=="
32+
crossorigin="anonymous"></script>
33+
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
34+
integrity="sha512-Wr9OKCTtq1anK0hq5bY3X/AvDI5EflDSAh0mE9gma+4hl+kXdTJPKZ3TwLMBcrgUeoY0s3dq9JjhCQc7vddtFg=="
35+
crossorigin="anonymous"></script>
36+
<script src="https://unpkg.com/graphiql/graphiql.min.js"
5537
integrity="sha512-FVCV2//UVo1qJ3Kg6kkHLe0Hg+IJhjrGa+aYHh8xD4KmwbbjthIzvaAcCJsQgA43+k+6u7HqORKXMyMt82Srfw=="
56-
crossorigin="anonymous"
57-
></script>
58-
<script
59-
src="https://unpkg.com/@graphiql/plugin-explorer@0.1.12/dist/graphiql-plugin-explorer.umd.js"
38+
crossorigin="anonymous"></script>
39+
<script src="https://unpkg.com/@graphiql/plugin-explorer@0.1.12/dist/graphiql-plugin-explorer.umd.js"
6040
integrity="sha512-Fjas/uSkzvsFjbv4jqU9nt4ulU7LDjiMAXW2YFTYD96NgKS1fhhAsGR4b2k2VaVLsE29aia3vyobAq9TNzusvA=="
61-
crossorigin="anonymous"
62-
></script>
41+
crossorigin="anonymous"></script>
42+
<script src="https://unpkg.com/@graphiql/plugin-code-exporter/dist/graphiql-plugin-code-exporter.umd.js"
43+
integrity="sha512-NwP+k36ExLYeIqp2lniZCblbz/FLJ/lQlBV55B6vafZWIYppwHUp1gCdvlaaUjV95RWPInQy4z/sIa56psJy/g=="
44+
crossorigin="anonymous"></script>
45+
6346
<script>
64-
function GraphiQLWithExplorer() {
47+
var serverUrl = '/${graphQLEndpoint}';
48+
var subscriptionUrl = '/${subscriptionsEndpoint}';
49+
var fetcher = GraphiQL.createFetcher({
50+
url: serverUrl,
51+
subscriptionUrl
52+
});
53+
54+
var fetchSnippet = {
55+
language: 'JavaScript',
56+
name: 'Fetch',
57+
codeMirrorMode: 'jsx',
58+
options: [],
59+
generate: (generateOptions) => {
60+
const operation = generateOptions.operationDataList[0];
61+
const context = generateOptions.context;
62+
const headers = context.headers.length !== 0 ? `headers: ${context.headers},\n ` : '';
63+
const variables = JSON.stringify(operation.variables);
64+
return `
65+
const res = await fetch("${context.serverUrl}", {
66+
method: 'POST',
67+
${headers}body: JSON.stringify({
68+
operationName: "${operation.name}",
69+
query: \`${operation.query.replaceAll("\n", "\\n")}\`,
70+
variables: ${variables}
71+
}),
72+
});
73+
74+
const { errors, data } = await res.json();
75+
76+
// Do something with the response
77+
console.log(data, errors);
78+
`;
79+
}
80+
};
81+
82+
var curlSnippet = {
83+
language: 'Bash',
84+
name: 'Curl',
85+
codeMirrorMode: 'jsx',
86+
options: [],
87+
generate: (generateOptions) => {
88+
const operation = generateOptions.operationDataList[0];
89+
const context = generateOptions.context;
90+
let headersObject;
91+
try {
92+
headersObject = JSON.parse(context.headers);
93+
} catch (e) {
94+
headersObject = {};
95+
}
96+
const headers = Object.entries(headersObject)
97+
.reduce((acc, [headerName, headerValue]) => `${acc} -H '${headerName}: ${headerValue}' \\\n`, '');
98+
const payload = JSON.stringify({
99+
operationName: operation.name,
100+
query: `${operation.query.replaceAll("\n", "\\n")}`,
101+
variables: operation.variables
102+
})
103+
return `curl '${context.serverUrl}' \\\n${headers}--data-raw $'${payload}' --compressed`;
104+
}
105+
}
106+
107+
function GraphiQLWithPlugins() {
65108
var [query, setQuery] = React.useState('');
109+
var [variables, setVariables] = React.useState('');
110+
var [headers, setHeaders] = React.useState('');
111+
var defaultHeaders = `{\n "content-type": "application/json"\n}`;
112+
66113
var explorerPlugin = GraphiQLPluginExplorer.useExplorerPlugin({
67-
query: query,
114+
query,
68115
onEdit: setQuery,
69116
});
117+
var exporterPlugin = GraphiQLPluginCodeExporter.useExporterPlugin({
118+
query,
119+
variables,
120+
context: { serverUrl, headers },
121+
snippets: [curlSnippet, fetchSnippet]
122+
});
123+
70124
return React.createElement(GraphiQL, {
71-
fetcher: GraphiQL.createFetcher({
72-
url: '/${graphQLEndpoint}',
73-
subscriptionUrl: '/${subscriptionsEndpoint}'
74-
}),
75-
defaultEditorToolsVisibility: true,
76-
plugins: [explorerPlugin],
77-
query: query,
125+
fetcher,
126+
query,
78127
onEditQuery: setQuery,
128+
variables,
129+
onEditVariables: setVariables,
130+
headers: '',
131+
onEditHeaders: setHeaders,
132+
defaultHeaders,
133+
defaultEditorToolsVisibility: true,
134+
plugins: [explorerPlugin, exporterPlugin]
79135
});
80136
}
137+
81138
ReactDOM.render(
82-
React.createElement(GraphiQLWithExplorer),
83-
document.getElementById('graphiql'),
139+
React.createElement(GraphiQLWithPlugins),
140+
document.getElementById('graphiql')
84141
);
85142
</script>
86143
</body>
144+
87145
</html>

0 commit comments

Comments
 (0)