Skip to content
This repository was archived by the owner on Dec 19, 2023. It is now read-only.

Commit f7c4489

Browse files
oliemansmoliemansm
committed
Upgrade GraphiQL to 1.0.6 including header support
fix #441
1 parent 2a81f68 commit f7c4489

File tree

4 files changed

+181
-152
lines changed

4 files changed

+181
-152
lines changed

‎example-graphql-tools/src/main/resources/application.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ graphql:
99
graphiql:
1010
headers:
1111
Authorization: "Bearer 05bd9a5f3fe0408f89520946b0fe1b06"
12+
props:
13+
variables:
14+
headerEditorEnabled: true
1215
logging:
1316
level:
1417
com:

‎graphiql-spring-boot-autoconfigure/src/main/resources/graphiql.html‎

Lines changed: 151 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -1,164 +1,165 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8"/>
5-
<meta name="robots" content="noindex"/>
6-
<meta name="referrer" content="origin"/>
7-
<meta name="viewport" content="width=device-width, initial-scale=1"/>
8-
<title>${pageTitle}</title>
9-
<style>
10-
body {
11-
height: 100vh;
12-
margin: 0;
13-
overflow: hidden;
14-
}
15-
16-
#splash {
17-
color: #333;
18-
display: flex;
19-
flex-direction: column;
20-
font-family: system, -apple-system, "San Francisco", ".SFNSDisplay-Regular", "Segoe UI", Segoe, "Segoe WP", "Helvetica Neue", helvetica, "Lucida Grande", arial, sans-serif;
21-
height: 100vh;
22-
justify-content: center;
23-
text-align: center;
24-
}
25-
26-
</style>
27-
28-
<script src="${es6PromiseJsUrl}"></script>
29-
<script src="${fetchJsUrl}"></script>
30-
<script src="${reactJsUrl}"></script>
31-
<script src="${reactDomJsUrl}"></script>
32-
33-
<link rel="stylesheet" href="${graphiqlCssUrl}"/>
34-
<link rel="icon" type="image/x-icon" href="${pageFavicon}">
35-
<script src="${graphiqlJsUrl}"></script>
36-
<script src="${subscriptionsTransportWsBrowserClientUrl}"></script>
37-
<script src="${graphiqlSubscriptionsFetcherBrowserClientUrl}"></script>
38-
</head>
39-
<body>
40-
<div id="splash">
41-
Loading&hellip;
42-
</div>
43-
<script>
44-
var editorThemeCss = '${editorThemeCss}'
45-
if (editorThemeCss !== '') {
46-
var link = document.createElement( "link" );
47-
link.href = editorThemeCss;
48-
link.type = "text/css";
49-
link.rel = "stylesheet";
50-
link.media = "screen,print";
51-
52-
document.getElementsByTagName( "head" )[0].appendChild( link );
4+
<meta charset="utf-8" />
5+
<meta name="robots" content="noindex" />
6+
<meta name="referrer" content="origin" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<title>${pageTitle}</title>
9+
<style>
10+
body {
11+
height: 100vh;
12+
margin: 0;
13+
overflow: hidden;
5314
}
5415

55-
// Parse the search string to get url parameters.
56-
var search = window.location.search;
57-
var parameters = {};
58-
search.substr(1).split('&').forEach(function (entry) {
59-
var eq = entry.indexOf('=');
60-
if (eq >= 0) {
61-
parameters[decodeURIComponent(entry.slice(0, eq))] =
62-
decodeURIComponent(entry.slice(eq + 1));
63-
}
64-
});
65-
66-
// if variables was provided, try to format it.
67-
if (parameters.variables) {
68-
try {
69-
parameters.variables = JSON.stringify(JSON.parse(parameters.variables), null, 2);
70-
} catch (e) {
71-
// Do nothing, we want to display the invalid JSON as a string, rather
72-
// than present an error.
73-
}
16+
#splash {
17+
color: #333;
18+
display: flex;
19+
flex-direction: column;
20+
font-family: system, -apple-system, "San Francisco", ".SFNSDisplay-Regular", "Segoe UI", Segoe, "Segoe WP", "Helvetica Neue", helvetica, "Lucida Grande", arial, sans-serif;
21+
height: 100vh;
22+
justify-content: center;
23+
text-align: center;
7424
}
7525

76-
// When the query and variables string is edited, update the URL bar so
77-
// that it can be easily shared
78-
function onEditQuery(newQuery) {
79-
parameters.query = newQuery;
80-
updateURL();
81-
}
26+
</style>
8227

83-
function onEditVariables(newVariables) {
84-
parameters.variables = newVariables;
85-
updateURL();
86-
}
87-
88-
function onEditOperationName(newOperationName) {
89-
parameters.operationName = newOperationName;
90-
updateURL();
91-
}
92-
93-
function updateURL() {
94-
var newSearch = '?' + Object.keys(parameters).filter(function (key) {
95-
return Boolean(parameters[key]);
96-
}).map(function (key) {
97-
return encodeURIComponent(key) + '=' + encodeURIComponent(parameters[key]);
98-
}).join('&');
99-
history.replaceState(null, null, newSearch);
100-
}
28+
<script src="${es6PromiseJsUrl}"></script>
29+
<script src="${fetchJsUrl}"></script>
30+
<script src="${reactJsUrl}"></script>
31+
<script src="${reactDomJsUrl}"></script>
10132

102-
var headers = ${headers};
103-
104-
// Defines a GraphQL fetcher using the fetch API. You're not required to
105-
// use fetch, and could instead implement graphQLFetcher however you like,
106-
// as long as it returns a Promise or Observable.
107-
function graphQLFetcher(graphQLParams) {
108-
// This example expects a GraphQL server at the path /graphql.
109-
// Change this to point wherever you host your GraphQL server.
110-
return fetch('${graphqlEndpoint}', {
111-
method: 'post',
112-
headers: headers,
113-
body: JSON.stringify(graphQLParams),
114-
credentials: 'include'
115-
}).then(function (response) {
116-
return response.text();
117-
}).then(function (responseBody) {
118-
try {
119-
return JSON.parse(responseBody);
120-
} catch (error) {
121-
return responseBody;
122-
}
123-
});
124-
}
125-
126-
var loc = window.location, newUri;
127-
128-
if (loc.protocol === "https:") {
129-
newUri = "wss:";
130-
} else {
131-
newUri = "ws:";
132-
}
133-
newUri += "//" + loc.host;
134-
newUri += "${subscriptionsEndpoint}";
135-
136-
var subscriptionsClient = new window.SubscriptionsTransportWs.SubscriptionClient(newUri, {
137-
reconnect: ${subscriptionClientReconnect},
138-
timeout: ${subscriptionClientTimeout}
139-
});
140-
var subscriptionsFetcher = window.GraphiQLSubscriptionsFetcher.graphQLFetcher(subscriptionsClient, graphQLFetcher);
141-
142-
var props = ${props};
143-
if (parameters.query) {
144-
props.query = parameters.query;
145-
}
146-
if (parameters.variables) {
147-
props.variables = parameters.variables;
33+
<link rel="stylesheet" href="${graphiqlCssUrl}" />
34+
<link rel="icon" type="image/x-icon" href="${pageFavicon}">
35+
<script src="${graphiqlJsUrl}"></script>
36+
<script src="${subscriptionsTransportWsBrowserClientUrl}"></script>
37+
<script src="${graphiqlSubscriptionsFetcherBrowserClientUrl}"></script>
38+
</head>
39+
<body>
40+
<div id="splash">
41+
Loading&hellip;
42+
</div>
43+
<script>
44+
var editorThemeCss = '${editorThemeCss}'
45+
if (editorThemeCss !== '') {
46+
var link = document.createElement("link")
47+
link.href = editorThemeCss
48+
link.type = "text/css"
49+
link.rel = "stylesheet"
50+
link.media = "screen,print"
51+
52+
document.getElementsByTagName("head")[0].appendChild(link)
53+
}
54+
55+
// Parse the search string to get url parameters.
56+
var search = window.location.search
57+
var parameters = {}
58+
search.substr(1).split('&').forEach(function(entry) {
59+
var eq = entry.indexOf('=')
60+
if (eq >= 0) {
61+
parameters[decodeURIComponent(entry.slice(0, eq))] =
62+
decodeURIComponent(entry.slice(eq + 1))
14863
}
149-
if (parameters.operationName) {
150-
props.operationName = parameters.operationName;
64+
})
65+
66+
// if variables was provided, try to format it.
67+
if (parameters.variables) {
68+
try {
69+
parameters.variables = JSON.stringify(JSON.parse(parameters.variables), null, 2)
70+
} catch (e) {
71+
// Do nothing, we want to display the invalid JSON as a string, rather
72+
// than present an error.
15173
}
152-
props.fetcher = subscriptionsFetcher;
153-
props.onEditQuery = onEditQuery;
154-
props.onEditVariables = onEditVariables;
155-
props.onEditOperationName = onEditOperationName;
156-
157-
// Render <GraphiQL /> into the body.
158-
ReactDOM.render(
159-
React.createElement(GraphiQL, props),
160-
document.body
161-
);
74+
}
75+
76+
// When the query and variables string is edited, update the URL bar so
77+
// that it can be easily shared
78+
function onEditQuery(newQuery) {
79+
parameters.query = newQuery
80+
updateURL()
81+
}
82+
83+
function onEditVariables(newVariables) {
84+
parameters.variables = newVariables
85+
updateURL()
86+
}
87+
88+
function onEditOperationName(newOperationName) {
89+
parameters.operationName = newOperationName
90+
updateURL()
91+
}
92+
93+
function updateURL() {
94+
var newSearch = '?' + Object.keys(parameters).filter(function(key) {
95+
return Boolean(parameters[key])
96+
}).map(function(key) {
97+
return encodeURIComponent(key) + '=' + encodeURIComponent(parameters[key])
98+
}).join('&')
99+
history.replaceState(null, null, newSearch)
100+
}
101+
102+
var headers = ${headers}
103+
104+
// Defines a GraphQL fetcher using the fetch API. You're not required to
105+
// use fetch, and could instead implement graphQLFetcher however you like,
106+
// as long as it returns a Promise or Observable.
107+
function graphQLFetcher(graphQLParams) {
108+
// This example expects a GraphQL server at the path /graphql.
109+
// Change this to point wherever you host your GraphQL server.
110+
return fetch('${graphqlEndpoint}', {
111+
method: 'post',
112+
headers: headers,
113+
body: JSON.stringify(graphQLParams),
114+
credentials: 'include'
115+
}).then(function(response) {
116+
return response.text()
117+
}).then(function(responseBody) {
118+
try {
119+
return JSON.parse(responseBody)
120+
} catch (error) {
121+
return responseBody
122+
}
123+
})
124+
}
125+
126+
var loc = window.location, newUri
127+
128+
if (loc.protocol === "https:") {
129+
newUri = "wss:"
130+
} else {
131+
newUri = "ws:"
132+
}
133+
newUri += "//" + loc.host
134+
newUri += "${subscriptionsEndpoint}"
135+
136+
var subscriptionsClient = new window.SubscriptionsTransportWs.SubscriptionClient(newUri, {
137+
reconnect: ${subscriptionClientReconnect},
138+
timeout: ${subscriptionClientTimeout}
139+
})
140+
var subscriptionsFetcher = window.GraphiQLSubscriptionsFetcher.graphQLFetcher(subscriptionsClient, graphQLFetcher)
141+
142+
var props = ${props}
143+
if (parameters.query) {
144+
props.query = parameters.query
145+
}
146+
if (parameters.variables) {
147+
props.variables = parameters.variables
148+
}
149+
if (parameters.operationName) {
150+
props.operationName = parameters.operationName
151+
}
152+
props.fetcher = subscriptionsFetcher
153+
props.onEditQuery = onEditQuery
154+
props.onEditVariables = onEditVariables
155+
props.onEditOperationName = onEditOperationName
156+
157+
console.debug(props)
158+
// Render <GraphiQL /> into the body.
159+
ReactDOM.render(
160+
React.createElement(GraphiQL, props),
161+
document.body
162+
)
162163

163164
</script>
164165
</body>

‎graphiql-spring-boot-autoconfigure/src/main/resources/static/vendor/graphiql/graphiql.min.css‎

Lines changed: 12 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎graphiql-spring-boot-autoconfigure/src/main/resources/static/vendor/graphiql/graphiql.min.js‎

Lines changed: 15 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)