Skip to content

Commit e98a7b4

Browse files
leonardehrenfriedleonardehrenfried
authored
Merge pull request #6652 from leonardehrenfried/graphiql-upgrade
Upgrade to GraphiQL 4
2 parents 71247f0 + 4b4bf3a commit e98a7b4

File tree

2 files changed

+163
-162
lines changed

2 files changed

+163
-162
lines changed

‎application/src/client/graphiql/index.html‎

Lines changed: 163 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,53 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4+
<title>OTP GraphQL Explorer</title>
45
<style>
56
body {
6-
height: 100%;
77
margin: 0;
8-
width: 100%;
9-
overflow: hidden;
8+
overflow: hidden; /* in Firefox */
109
}
1110

1211
#graphiql {
13-
height: 100vh;
12+
height: 100dvh;
13+
}
14+
15+
.loading {
16+
height: 100%;
17+
display: flex;
18+
align-items: center;
19+
justify-content: center;
20+
font-size: 4rem;
1421
}
1522
</style>
23+
<link rel="stylesheet" href="https://esm.sh/[email protected]/dist/style.css"/>
1624

17-
<!--
18-
This GraphiQL example depends on Promise and fetch, which are available in
19-
modern browsers, but can be "polyfilled" for older browsers.
20-
GraphiQL itself depends on React DOM.
21-
If you do not want to rely on a CDN, you can host these files locally or
22-
include them directly in your favored resource bundler.
23-
-->
24-
25-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react.development.js" integrity="sha256-hXNk4rmCMYQXAl+5tLg1XAn3X6RroL6T9SD3afZ1eng=" crossorigin="anonymous"></script>
26-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.development.js" integrity="sha256-bRHakm3eFVwNh3OuDgW7ZGg/H0DU4etihxfdhJkXIoI=" crossorigin="anonymous"></script>
27-
28-
<!--
29-
These two files can be found in the npm module, however you may wish to
30-
copy them directly into your environment, or perhaps include them in your
31-
favored resource bundler.
32-
-->
33-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/graphiql.min.css" integrity="sha256-sYaCR/jgUCzYaeWB9fPLVbM0hi5/UbHWy6zhEFm5rcI=" crossorigin="anonymous">
34-
<title>OTP GraphQL Explorer</title>
35-
</head>
25+
<!-- Note: the ?standalone flag bundles the module along with all of its `dependencies`, excluding `peerDependencies`, into a single JavaScript file. -->
26+
<script type="importmap">
27+
{
28+
"imports": {
29+
"react": "https://esm.sh/[email protected]",
30+
"react/jsx-runtime": "https://esm.sh/[email protected]/jsx-runtime",
3631

37-
<body>
38-
<div id="graphiql">Loading...</div>
32+
"react-dom": "https://esm.sh/[email protected]",
33+
"react-dom/client": "https://esm.sh/[email protected]/client",
3934

40-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/graphiql.min.js" integrity="sha256-IvqrlAZ7aV5feVlhn75obrzIlVACoMl9mGvLukrUvCw=" crossorigin="anonymous"></script>
35+
"graphiql": "https://esm.sh/[email protected]?standalone&external=react,react/jsx-runtime,react-dom,@graphiql/react",
36+
"@graphiql/react": "https://esm.sh/@graphiql/[email protected]?standalone&external=react,react/jsx-runtime,react-dom,graphql",
4137

42-
<script>
43-
const gtfsExampleQuery = `
38+
"graphql": "https://esm.sh/[email protected]"
39+
}
40+
}
41+
</script>
42+
43+
<script type="module">
44+
// Import React and ReactDOM
45+
import React from 'react';
46+
import ReactDOM from 'react-dom/client';
47+
// Import GraphiQL and the Explorer plugin
48+
import { GraphiQL } from 'graphiql';
49+
50+
const gtfsExampleQuery = `
4451
# This is an example query for fetching all routes of your OTP deployment.
4552
# Click on the documentation icon on the left to read about the available types
4653
# or use autocomplete to explore the schema.
@@ -51,7 +58,7 @@
5158
}
5259
}
5360
`;
54-
const transmodelExampleQuery = `
61+
const transmodelExampleQuery = `
5562
# This is an example query for fetching the OTP version and a trip. Change the
5663
# coordinates to fit your OTP deployment.
5764
query TransmodelExampleQuery {
@@ -86,136 +93,145 @@
8693
}
8794
`
8895

89-
// Parse the search string to get url parameters.
90-
var search = window.location.search;
91-
var parameters = {};
92-
search
93-
.substr(1)
94-
.split('&')
95-
.forEach(function(entry) {
96-
var eq = entry.indexOf('=');
97-
if (eq >= 0) {
98-
parameters[decodeURIComponent(entry.slice(0, eq))] = decodeURIComponent(
99-
entry.slice(eq + 1),
100-
);
101-
}
102-
});
103-
104-
// If variables was provided, try to format it.
105-
if (parameters.variables) {
106-
try {
107-
parameters.variables = JSON.stringify(
108-
JSON.parse(parameters.variables),
109-
null,
110-
2,
111-
);
112-
} catch (e) {
113-
// Do nothing, we want to display the invalid JSON as a string, rather
114-
// than present an error.
96+
// Parse the search string to get url parameters.
97+
var search = window.location.search;
98+
var parameters = {};
99+
search
100+
.substr(1)
101+
.split('&')
102+
.forEach(function(entry) {
103+
var eq = entry.indexOf('=');
104+
if (eq >= 0) {
105+
parameters[decodeURIComponent(entry.slice(0, eq))] = decodeURIComponent(
106+
entry.slice(eq + 1),
107+
);
108+
}
109+
});
110+
111+
// If variables was provided, try to format it.
112+
if (parameters.variables) {
113+
try {
114+
parameters.variables = JSON.stringify(
115+
JSON.parse(parameters.variables),
116+
null,
117+
2,
118+
);
119+
} catch (e) {
120+
// Do nothing, we want to display the invalid JSON as a string, rather
121+
// than present an error.
122+
}
115123
}
116-
}
117124

118-
// When the query and variables string is edited, update the URL bar so
119-
// that it can be easily shared.
120-
function onEditQuery(newQuery) {
121-
parameters.query = newQuery;
122-
updateURL();
123-
}
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+
}
124131

125-
function onEditVariables(newVariables) {
126-
parameters.variables = newVariables;
127-
updateURL();
128-
}
132+
function onEditVariables(newVariables) {
133+
parameters.variables = newVariables;
134+
updateURL();
135+
}
129136

130-
function onEditOperationName(newOperationName) {
131-
parameters.operationName = newOperationName;
132-
updateURL();
133-
}
137+
function onEditHeaders(headers) {
138+
parameters.headers = headers;
139+
updateURL();
140+
}
134141

135-
function onEditHeaders(headers) {
136-
parameters.headers = headers;
137-
updateURL();
138-
}
142+
function updateURL() {
143+
if(parameters["query"] !== gtfsExampleQuery && parameters["query"] !== transmodelExampleQuery) {
144+
145+
var newSearch =
146+
'?' +
147+
Object.keys(parameters)
148+
.filter(function(key) {
149+
return Boolean(parameters[key]);
150+
})
151+
.map(function(key) {
152+
return (
153+
encodeURIComponent(key) + '=' + encodeURIComponent(parameters[key])
154+
);
155+
})
156+
.join('&');
157+
history.replaceState(null, null, newSearch);
158+
}
159+
}
139160

140-
function updateURL() {
141-
if(parameters["query"] !== gtfsExampleQuery && parameters["query"] !== transmodelExampleQuery) {
142-
143-
var newSearch =
144-
'?' +
145-
Object.keys(parameters)
146-
.filter(function(key) {
147-
return Boolean(parameters[key]);
148-
})
149-
.map(function(key) {
150-
return (
151-
encodeURIComponent(key) + '=' + encodeURIComponent(parameters[key])
152-
);
153-
})
154-
.join('&');
155-
history.replaceState(null, null, newSearch);
161+
let apiFlavor = parameters.flavor || "gtfs";
162+
let urls = {
163+
gtfs: '/otp/gtfs/v1',
164+
transmodel: '/otp/transmodel/v3'
156165
}
157-
}
158166

159-
let apiFlavor = parameters.flavor || "gtfs";
160-
let urls = {
161-
gtfs: '/otp/gtfs/v1',
162-
transmodel: '/otp/transmodel/v3'
163-
}
167+
let defaultQueries = {
168+
gtfs: gtfsExampleQuery,
169+
transmodel: transmodelExampleQuery
170+
}
164171

165-
let defaultQueries = {
166-
gtfs: gtfsExampleQuery,
167-
transmodel: transmodelExampleQuery
168-
}
172+
let updateFlavor = (e) => {
173+
apiFlavor = e.target.value;
174+
console.log(`Setting API flavor to '${apiFlavor}'`);
175+
history.pushState(null, null, `?flavor=${apiFlavor}`);
176+
window.location.reload();
177+
};
178+
179+
function graphQLFetcher(query, { headers }) {
180+
const defaultHeaders = {
181+
Accept: 'application/json',
182+
'Content-Type': 'application/json',
183+
}
184+
const mergedHeaders = Object.assign({}, defaultHeaders, headers);
185+
return fetch(
186+
urls[apiFlavor],
187+
{
188+
method: 'post',
189+
headers: mergedHeaders,
190+
body: JSON.stringify(query),
191+
credentials: 'omit',
192+
},
193+
).then(function (response) {
194+
return response.json().catch(function () {
195+
return response.text();
196+
});
197+
});
198+
}
169199

170-
let updateFlavor = (e) => {
171-
apiFlavor = e.target.value;
172-
console.log(`Setting API flavor to '${apiFlavor}'`);
173-
history.pushState(null, null, `?flavor=${apiFlavor}`);
174-
window.location.reload();
175-
};
176-
177-
function graphQLFetcher(query, { headers }) {
178-
const defaultHeaders = {
179-
Accept: 'application/json',
180-
'Content-Type': 'application/json',
181-
}
182-
const mergedHeaders = Object.assign({}, defaultHeaders, headers);
183-
return fetch(
184-
urls[apiFlavor],
185-
{
186-
method: 'post',
187-
headers: mergedHeaders,
188-
body: JSON.stringify(query),
189-
credentials: 'omit',
200+
const header = React.createElement("a", { className: "graphiql-logo-link" }, "OTP GraphQL Explorer ");
201+
const select = React.createElement("select", { onChange: updateFlavor, value: apiFlavor }, [
202+
React.createElement("option", { key: "gtfs", value: "gtfs" }, "GTFS"),
203+
React.createElement("option", { key: "transmodel", value: "transmodel" }, "Transmodel")
204+
]);
205+
206+
var graphiql = React.createElement(GraphiQL, {
207+
fetcher: graphQLFetcher,
208+
defaultVariableEditorOpen: true,
209+
query: parameters.query || defaultQueries[apiFlavor],
210+
variables: parameters.variables,
211+
headers: parameters.headers,
212+
onEditQuery: onEditQuery,
213+
onEditVariables: onEditVariables,
214+
onEditHeaders: onEditHeaders,
215+
defaultEditorToolsVisibility: true
190216
},
191-
).then(function (response) {
192-
return response.json().catch(function () {
193-
return response.text();
194-
});
195-
});
196-
}
217+
React.createElement(GraphiQL.Logo, {}, [header, select]));
218+
219+
function App() {
220+
return graphiql;
221+
}
222+
223+
const container = document.getElementById('graphiql');
224+
const root = ReactDOM.createRoot(container);
225+
root.render(React.createElement(App));
226+
</script>
227+
</head>
228+
229+
<body>
230+
<div id="graphiql">Loading...</div>
231+
232+
233+
<script>
197234

198-
const header = React.createElement("a", { className: "graphiql-logo-link" }, "OTP GraphQL Explorer ");
199-
const select = React.createElement("select", { onChange: updateFlavor, value: apiFlavor }, [
200-
React.createElement("option", { key: "gtfs", value: "gtfs" }, "GTFS"),
201-
React.createElement("option", { key: "transmodel", value: "transmodel" }, "Transmodel")
202-
]);
203-
204-
var graphiql = React.createElement(GraphiQL, {
205-
fetcher: graphQLFetcher,
206-
defaultVariableEditorOpen: true,
207-
query: parameters.query || defaultQueries[apiFlavor],
208-
variables: parameters.variables,
209-
headers: parameters.headers,
210-
operationName: parameters.operationName,
211-
onEditQuery: onEditQuery,
212-
onEditVariables: onEditVariables,
213-
onEditOperationName: onEditOperationName,
214-
onEditHeaders: onEditHeaders,
215-
defaultEditorToolsVisibility: true
216-
},
217-
React.createElement(GraphiQL.Logo, {}, [header, select]));
218-
ReactDOM.render(graphiql, document.getElementById('graphiql'));
219235
</script>
220236
</body>
221237
</html>

‎application/src/client/legacygraphql/graphiql/index.html‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

0 commit comments

Comments
 (0)