-
Notifications
You must be signed in to change notification settings - Fork 0
/
graphiql.html
82 lines (74 loc) · 2.14 KB
/
graphiql.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Go GraphQL Mongo GraphiQL</title>
<link
rel="stylesheet"
href="https://unpkg.com/graphiql@3.0/graphiql.min.css"
/>
<link
rel="stylesheet"
href="https://unpkg.com/@graphiql/plugin-explorer@0.3/dist/style.css"
/>
<style>
body {
height: 100%;
margin: 0;
width: 100%;
overflow: hidden;
}
#graphiql {
height: 100vh;
}
.graphiql-container {
--font-size-body: 0.9rem !important;
--font-size-h4: 1.1rem !important;
--font-size-h3: 1.3rem !important;
--font-size-h2: 1.5rem !important;
}
.graphiql-explorer-root > div:first-child {
overflow-x: auto !important;
overflow-y: auto !important;
}
.graphiql-explorer-graphql-arguments {
font-style: italic;
}
</style>
<script
src="https://unpkg.com/react@18/umd/react.production.min.js"
type="application/javascript"
></script>
<script
src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
type="application/javascript"
></script>
<script
src="https://unpkg.com/graphiql@3.0/graphiql.min.js"
type="application/javascript"
></script>
<script
src="https://unpkg.com/@graphiql/plugin-explorer@0.3/dist/index.umd.js"
type="application/javascript"
></script>
</head>
<body>
<div id="graphiql">Loading...</div>
<script>
ReactDOM.render(
React.createElement(GraphiQL, {
fetcher: GraphiQL.createFetcher({ url: "/api/graphql" }),
storage: GraphiQL.createLocalStorage({
namespace: "GoGraphQLMongoServer",
}),
defaultEditorToolsVisibility: "variables",
shouldPersistHeaders: true,
plugins: [GraphiQLPluginExplorer.explorerPlugin()],
defaultHeaders: '{\n "Authorization": "Add your token here"\n}',
}),
document.getElementById("graphiql")
);
document.querySelector(".graphiql-logo").innerHTML =
"Go GraphQL Mongo Graph<em>i</em>QL";
</script>
</body>
</html>