-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
141 lines (128 loc) · 3.59 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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!--
* 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>GraphiQL</title>
<style>
body {
height: 100%;
margin: 0;
width: 100%;
overflow: hidden;
scrollbar-color: #50628399 #0000;
scrollbar-width: thin;
}
#graphiql {
height: calc(100vh - 32px);
}
#header {
height: 32px;
display: flex;
flex-wrap: wrap;
overflow: hidden;
}
#header>div {
flex-grow: 1;
text-align: center;
font-size: 20px;
line-height: 40px;
background-color: hsl(var(--color-base));
font-family: "Fira Code";
color: #95a0b5
}
#header>div:first-child {
min-width: 350px;
}
#header>div:last-child {
min-width: 600px;
}
#header>div>a {
color: #feca1b;
}
.graphiql-explorer-root>div {
overflow: unset !important;
overflow-x: scroll;
}
.CodeMirror-scrollbar-filler {
background-color: #0000 !important;
}
</style>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/graphiql/graphiql.min.js" type="application/javascript"></script>
<link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
<script src="https://unpkg.com/@graphiql/plugin-explorer/dist/index.umd.js" crossorigin></script>
<link rel="stylesheet" href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css" />
</head>
<body>
<div id="header" class="graphiql-container">
<div>
<a href="https://pokeapi.co">PokeAPI</a> GraphiQL interface
</div>
<div>
A rate limit of 200 calls per hour is enforced
</div>
</div>
<div id="graphiql">Loading...</div>
<script>
const root = ReactDOM.createRoot(document.getElementById('graphiql'));
const fetcher = GraphiQL.createFetcher({
url: 'https://beta.pokeapi.co/graphql/v1beta',
headers: { 'X-Method-Used': 'graphiql-pokeapi-console' },
});
const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
root.render(
React.createElement(GraphiQL, {
fetcher,
defaultEditorToolsVisibility: true,
plugins: [explorerPlugin],
explorerIsOpen: true,
visiblePlugin: explorerPlugin,
confirmCloseTab: function () { return true },
defaultQuery: `
# Using this tool you can try out GraphQL queries against our API
# https://beta.pokeapi.co/graphql/v1beta
#
# You can then use these queries in your product
#
# Below a query that fetches and sorts all gen-3 pokemon
# and then for each generation counts how many pokemon are present
query samplePokeAPIquery {
gen3_species: pokemon_v2_pokemonspecies(
where: {pokemon_v2_generation: {name: {_eq: "generation-iii"}}}
order_by: {id: asc}
) {
name
id
}
generations: pokemon_v2_generation {
name
pokemon_species: pokemon_v2_pokemonspecies_aggregate {
aggregate {
count
}
}
}
}
# Find the documentation here
# https://pokeapi.co/docs/graphql`
},
React.createElement(GraphiQL.Logo,
{},
React.createElement('img', {
src: 'https://raw.githubusercontent.com/PokeAPI/media/refs/heads/master/logo/pokeapi_64_min.png',
alt: 'pokeapi'
}
)
)
),
);
</script>
</body>
</html>