/
index.html
123 lines (108 loc) · 3.29 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!--
* Copyright (c) 2021 GraphQL Contributors
* All rights reserved.
*
* This source code is licensed under the license found in the
* LICENSE file in the root directory of this source tree.
-->
<!doctype html>
<html lang="en">
<head>
<title></title>
<style>
body {
height: 100%;
margin: 0;
width: 100%;
overflow: hidden;
}
#graphiql {
height: 100vh;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
<link
rel="stylesheet"
href="https://unpkg.com/@graphiql/plugin-code-exporter/dist/style.css"
/>
</head>
<body>
<div id="graphiql">Loading...</div>
<script
crossorigin
src="https://unpkg.com/react@18/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
></script>
<script
src="https://unpkg.com/graphiql/graphiql.min.js"
integrity="sha512-FmqQBx9FVDKvUNDuimXswv4o1eqQUqzQYIuEoIkmkDaoXMUvmD9fKQXYSrSEMf5LQUEZr5EEMesxUzex2wS/hg=="
crossorigin="anonymous"
></script>
<script
src="https://unpkg.com/@graphiql/plugin-code-exporter/dist/index.umd.js"
integrity="sha512-NwP+k36ExLYeIqp2lniZCblbz/FLJ/lQlBV55B6vafZWIYppwHUp1gCdvlaaUjV95RWPInQy4z/sIa56psJy/g=="
crossorigin="anonymous"
></script>
<script>
var fetcher = GraphiQL.createFetcher({
url: 'https://swapi-graphql.netlify.app/.netlify/functions/index',
});
function removeQueryName(query) {
return query.replace(
/^[^{(]+([{(])/,
(_match, openingCurlyBracketsOrParenthesis) =>
`query ${openingCurlyBracketsOrParenthesis}`,
);
}
function getQuery(arg, spaceCount) {
var { operationDataList } = arg;
var { query } = operationDataList[0];
var anonymousQuery = removeQueryName(query);
return (
` `.repeat(spaceCount) +
anonymousQuery.replace(/\n/g, `\n` + ` `.repeat(spaceCount))
);
}
var exampleSnippetOne = {
name: `Example One`,
language: `JavaScript`,
codeMirrorMode: `jsx`,
options: [],
generate: arg => `export const query = graphql\`
${getQuery(arg, 2)}
\`
`,
};
var exampleSnippetTwo = {
name: `Example Two`,
language: `JavaScript`,
codeMirrorMode: `jsx`,
options: [],
generate: arg => `import { graphql } from 'graphql'
export const query = graphql\`
${getQuery(arg, 2)}
\`
`,
};
var snippets = [exampleSnippetOne, exampleSnippetTwo];
var codeExporterPlugin = GraphiQLPluginCodeExporter.codeExporterPlugin({
snippets,
});
var query =
'query AllFilms {\n allFilms {\n films {\n title\n }\n }\n}';
function GraphiQLWithExporter() {
return React.createElement(GraphiQL, {
fetcher: fetcher,
defaultEditorToolsVisibility: true,
plugins: [codeExporterPlugin],
defaultQuery: query,
});
}
const root = ReactDOM.createRoot(document.getElementById('graphiql'));
root.render(React.createElement(GraphiQLWithExporter));
</script>
</body>
</html>