Skip to content

Commit 2b852ef

Browse files
syrusakbarysyrusakbary
committed
Updated to latest GraphiQL version
1 parent 340396a commit 2b852ef

File tree

6 files changed

+154
-93
lines changed

6 files changed

+154
-93
lines changed

‎graphql_flask/static/graphql/fetch.min.js‎

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

‎graphql_flask/static/graphql/graphiql.css‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@ html, body {
106106
}
107107

108108
#graphiql-container .resultWrap {
109+
position: relative;
109110
display: -webkit-flex;
110111
display: flex;
111112
-webkit-flex-direction: column;
@@ -1013,6 +1014,52 @@ span.CodeMirror-selectedtext { background: none; }
10131014
background-position: right bottom;
10141015
width: 100%; height: 100%;
10151016
}
1017+
#graphiql-container .spinner-container {
1018+
position: absolute;
1019+
top: 50%;
1020+
height: 36px;
1021+
width: 36px;
1022+
left: 50%;
1023+
transform: translate(-50%, -50%);
1024+
z-index: 10;
1025+
}
1026+
1027+
#graphiql-container .spinner {
1028+
vertical-align: middle;
1029+
display: inline-block;
1030+
height: 24px;
1031+
width: 24px;
1032+
position: absolute;
1033+
-webkit-animation: rotation .6s infinite linear;
1034+
-moz-animation: rotation .6s infinite linear;
1035+
-o-animation: rotation .6s infinite linear;
1036+
animation: rotation .6s infinite linear;
1037+
border-left: 6px solid rgba(150, 150, 150, .15);
1038+
border-right: 6px solid rgba(150, 150, 150, .15);
1039+
border-bottom: 6px solid rgba(150, 150, 150, .15);
1040+
border-top: 6px solid rgba(150, 150, 150, .8);
1041+
border-radius: 100%;
1042+
}
1043+
1044+
@-webkit-keyframes rotation {
1045+
from { -webkit-transform: rotate(0deg); }
1046+
to { -webkit-transform: rotate(359deg); }
1047+
}
1048+
1049+
@-moz-keyframes rotation {
1050+
from { -moz-transform: rotate(0deg); }
1051+
to { -moz-transform: rotate(359deg); }
1052+
}
1053+
1054+
@-o-keyframes rotation {
1055+
from { -o-transform: rotate(0deg); }
1056+
to { -o-transform: rotate(359deg); }
1057+
}
1058+
1059+
@keyframes rotation {
1060+
from { transform: rotate(0deg); }
1061+
to { transform: rotate(359deg); }
1062+
}
10161063
.CodeMirror-hints {
10171064
background: white;
10181065
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);

‎graphql_flask/static/graphql/graphiql.min.js‎

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

‎graphql_flask/static/graphql/react-dom.min.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* ReactDOM v0.14.2
3+
*
4+
* Copyright 2013-2015, Facebook, Inc.
5+
* All rights reserved.
6+
*
7+
* This source code is licensed under the BSD-style license found in the
8+
* LICENSE file in the root directory of this source tree. An additional grant
9+
* of patent rights can be found in the PATENTS file in the same directory.
10+
*
11+
*/
12+
!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e(require("react"));else if("function"==typeof define&&define.amd)define(["react"],e);else{var f;f="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,f.ReactDOM=e(f.React)}}(function(e){return e.__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED});

‎graphql_flask/static/graphql/react.min.js‎

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

‎graphql_flask/templates/graphiql.html‎

Lines changed: 74 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -2,91 +2,93 @@
22
<html>
33
<head>
44
<link rel="stylesheet" href="{{ url_for("graphql.static", filename="graphiql.css") }}" />
5-
<script src="{{ url_for("graphql.static", filename="react.min.js") }}"></script>
65
<script src="{{ url_for("graphql.static", filename="fetch.min.js") }}"></script>
6+
<script src="{{ url_for("graphql.static", filename="react.min.js") }}"></script>
7+
<script src="{{ url_for("graphql.static", filename="react-dom.min.js") }}"></script>
78
<script src="{{ url_for("graphql.static", filename="graphiql.min.js") }}"></script>
89
</head>
9-
<body>
10-
Loading...
11-
<script>
10+
<body>
11+
<script>
12+
// Collect the URL parameters
13+
var parameters = {};
14+
window.location.search.substr(1).split('&').forEach(function (entry) {
15+
var eq = entry.indexOf('=');
16+
if (eq >= 0) {
17+
parameters[decodeURIComponent(entry.slice(0, eq))] =
18+
decodeURIComponent(entry.slice(eq + 1));
19+
}
20+
});
1221

13-
/**
14-
* This GraphiQL example illustrates how to use some of GraphiQL's props
15-
* in order to enable reading and updating the URL parameters, making
16-
* link sharing of queries a little bit easier.
17-
*
18-
* This is only one example of this kind of feature, GraphiQL exposes
19-
* various React params to enable interesting integrations.
20-
*/
22+
// Produce a Location query string from a parameter object.
23+
function locationQuery(params) {
24+
return '?' + Object.keys(params).map(function (key) {
25+
return encodeURIComponent(key) + '=' +
26+
encodeURIComponent(params[key]);
27+
}).join('&');
28+
}
2129

22-
// Parse the search string to get url parameters.
23-
var search = window.location.search;
24-
var parameters = {};
25-
search.substr(1).split('&').forEach(function (entry) {
26-
var eq = entry.indexOf('=');
27-
if (eq >= 0) {
28-
parameters[decodeURIComponent(entry.slice(0, eq))] =
29-
decodeURIComponent(entry.slice(eq + 1));
30-
}
31-
});
30+
// Derive a fetch URL from the current URL, sans the GraphQL parameters.
31+
var graphqlParamNames = {
32+
query: true,
33+
variables: true,
34+
operationName: true
35+
};
3236

33-
// if variables was provided, try to format it.
34-
if (parameters.variables) {
35-
try {
36-
parameters.variables =
37-
JSON.stringify(JSON.parse(query.variables), null, 2);
38-
} catch (e) {
39-
// Do nothing, we want to display the invalid JSON as a string, rather
40-
// than present an error.
41-
}
37+
var otherParams = {};
38+
for (var k in parameters) {
39+
if (parameters.hasOwnProperty(k) && graphqlParamNames[k] !== true) {
40+
otherParams[k] = parameters[k];
4241
}
42+
}
43+
var fetchURL = "{{ url_for('graphql') }}";
4344

44-
// When the query and variables string is edited, update the URL bar so
45-
// that it can be easily shared
46-
function onEditQuery(newQuery) {
47-
parameters.query = newQuery;
48-
updateURL();
49-
}
45+
// Defines a GraphQL fetcher using the fetch API.
46+
function graphQLFetcher(graphQLParams) {
47+
return fetch(fetchURL, {
48+
method: 'post',
49+
headers: {
50+
'Accept': 'application/json',
51+
'Content-Type': 'application/json'
52+
},
53+
body: JSON.stringify(graphQLParams),
54+
credentials: 'include',
55+
}).then(function (response) {
56+
return response.json();
57+
});
58+
}
5059

51-
function onEditVariables(newVariables) {
52-
parameters.variables = newVariables;
53-
updateURL();
54-
}
60+
// When the query and variables string is edited, update the URL bar so
61+
// that it can be easily shared.
62+
function onEditQuery(newQuery) {
63+
parameters.query = newQuery;
64+
updateURL();
65+
}
5566

56-
function updateURL() {
57-
var newSearch = '?' + Object.keys(parameters).map(function (key) {
58-
return encodeURIComponent(key) + '=' +
59-
encodeURIComponent(parameters[key]);
60-
}).join('&');
61-
history.replaceState(null, null, newSearch);
62-
}
67+
function onEditVariables(newVariables) {
68+
parameters.variables = newVariables;
69+
updateURL();
70+
}
6371

64-
// Defines a GraphQL fetcher using the fetch API.
65-
function graphQLFetcher(graphQLParams) {
66-
console.log(graphQLParams);
67-
return fetch(window.location.origin + '/graphql', {
68-
method: 'post',
69-
headers: { 'Content-Type': 'application/json' },
70-
body: JSON.stringify(graphQLParams),
71-
}).then(function (response) {
72-
return response.json()
73-
});
74-
}
72+
function updateURL() {
73+
history.replaceState(null, null, locationQuery(parameters));
74+
}
7575

76-
// Render <GraphiQL /> into the body.
77-
React.render(
78-
React.createElement(GraphiQL, {
79-
fetcher: graphQLFetcher,
80-
query: parameters.query,
81-
variables: parameters.variables,
82-
onEditQuery: onEditQuery,
83-
onEditVariables: onEditVariables,
76+
// Render <GraphiQL /> into the body.
77+
React.render(
78+
React.createElement(GraphiQL, {
79+
fetcher: graphQLFetcher,
80+
onEditQuery: onEditQuery,
81+
onEditVariables: onEditVariables,
8482
{%- if default_query %}
8583
defaultQuery: {{ default_query|tojson }},
8684
{%- endif %}
87-
}),
88-
document.body
89-
);
90-
</script>
91-
</body>
85+
query: undefined,
86+
response: null,
87+
variables: null
88+
}),
89+
document.body
90+
);
91+
</script>
92+
</body>
9293
</html>
94+

0 commit comments

Comments
 (0)