Skip to content

Commit 61d5c0c

Browse files
JPrevostJPrevost
authored
Merge pull request #647 from MITLibraries/playground
Playground
2 parents 972a2e3 + 70bacc6 commit 61d5c0c

File tree

1 file changed

+163
-44
lines changed

1 file changed

+163
-44
lines changed

‎public/playground.html‎

Lines changed: 163 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,178 @@
1+
<!--
2+
* Copyright (c) 2021 GraphQL Contributors
3+
* All rights reserved.
4+
*
5+
* MIT License
6+
*
7+
* Permission is hereby granted, free of charge, to any person obtaining a copy
8+
* of this software and associated documentation files (the "Software"), to deal
9+
* in the Software without restriction, including without limitation the rights
10+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11+
* copies of the Software, and to permit persons to whom the Software is
12+
* furnished to do so, subject to the following conditions:
13+
*
14+
* The above copyright notice and this permission notice shall be included in all
15+
* copies or substantial portions of the Software.
16+
*
17+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
23+
* SOFTWARE.
24+
-->
125
<!DOCTYPE html>
226
<html>
3-
4-
<head>
5-
<meta charset=utf-8/>
6-
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
7-
<title>GraphQL Playground</title>
8-
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/graphql-playground-react/build/static/css/index.css" />
9-
<link rel="shortcut icon" href="//cdn.jsdelivr.net/npm/graphql-playground-react/build/favicon.png" />
10-
<script src="//cdn.jsdelivr.net/npm/graphql-playground-react/build/static/js/middleware.js"></script>
11-
</head>
12-
13-
<body>
14-
<div id="root">
27+
<head>
1528
<style>
1629
body {
17-
background-color: rgb(23, 42, 58);
18-
font-family: Open Sans, sans-serif;
19-
height: 90vh;
20-
}
21-
22-
#root {
2330
height: 100%;
31+
margin: 0;
2432
width: 100%;
25-
display: flex;
26-
align-items: center;
27-
justify-content: center;
33+
overflow: hidden;
2834
}
2935

30-
.loading {
31-
font-size: 32px;
32-
font-weight: 200;
33-
color: rgba(255, 255, 255, .6);
34-
margin-left: 20px;
36+
#graphiql {
37+
height: 100vh;
3538
}
39+
</style>
3640

37-
img {
38-
width: 78px;
39-
height: 78px;
41+
<!--
42+
This GraphiQL example depends on Promise and fetch, which are available in
43+
modern browsers, but can be "polyfilled" for older browsers.
44+
GraphiQL itself depends on React DOM.
45+
If you do not want to rely on a CDN, you can host these files locally or
46+
include them directly in your favored resource bundler.
47+
-->
48+
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
49+
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
50+
<!--
51+
These two files can be found in the npm module, however you may wish to
52+
copy them directly into your environment, or perhaps include them in your
53+
favored resource bundler.
54+
-->
55+
<link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
56+
</head>
57+
58+
<body>
59+
<div id="graphiql">Loading...</div>
60+
<script src="https://unpkg.com/graphiql/graphiql.min.js" type="application/javascript"></script>
61+
<script>
62+
/**
63+
* This GraphiQL example illustrates how to use some of GraphiQL's props
64+
* in order to enable reading and updating the URL parameters, making
65+
* link sharing of queries a little bit easier.
66+
*
67+
* This is only one example of this kind of feature, GraphiQL exposes
68+
* various React params to enable interesting integrations.
69+
*
70+
* Sourced from: https://github.com/graphql/graphiql/blob/bcb27538d9074afdac3ff56074046965b456e57a/packages/graphiql/resources/renderExample.js
71+
*/
72+
73+
// Parse the search string to get url parameters.
74+
var search = window.location.search;
75+
var parameters = {};
76+
search
77+
.substr(1)
78+
.split("&")
79+
.forEach(function (entry) {
80+
var eq = entry.indexOf("=");
81+
if (eq >= 0) {
82+
parameters[decodeURIComponent(entry.slice(0, eq))] = decodeURIComponent(entry.slice(eq + 1));
83+
}
84+
});
85+
86+
// If variables was provided, try to format it.
87+
if (parameters.variables) {
88+
try {
89+
parameters.variables = JSON.stringify(JSON.parse(parameters.variables), null, 2);
90+
} catch (e) {
91+
// Do nothing, we want to display the invalid JSON as a string, rather
92+
// than present an error.
93+
}
4094
}
4195

42-
.title {
43-
font-weight: 400;
96+
// When the query and variables string is edited, update the URL bar so
97+
// that it can be easily shared.
98+
function onEditQuery(newQuery) {
99+
parameters.query = newQuery;
100+
updateURL();
101+
}
102+
103+
function onEditVariables(newVariables) {
104+
parameters.variables = newVariables;
105+
updateURL();
106+
}
107+
108+
function onEditOperationName(newOperationName) {
109+
parameters.operationName = newOperationName;
110+
updateURL();
111+
}
112+
113+
function updateURL() {
114+
var newSearch =
115+
"?" +
116+
Object.keys(parameters)
117+
.filter(function (key) {
118+
return Boolean(parameters[key]);
119+
})
120+
.map(function (key) {
121+
return encodeURIComponent(key) + "=" + encodeURIComponent(parameters[key]);
122+
})
123+
.join("&");
124+
history.replaceState(null, null, newSearch);
125+
}
126+
127+
// Defines a GraphQL fetcher using the fetch API. You're not required to
128+
// use fetch, and could instead implement graphQLFetcher however you like,
129+
// as long as it returns a Promise or Observable.
130+
function graphQLFetcher(graphQLParams) {
131+
// This should allow for the playground to use the local GraphQL endpoint in all of our environments,
132+
// including localhost, pr builds, staging environments, and production.
133+
// For this to work, we must host the static playground.html on the same server that runs the graphql endpoint.
134+
// In other words, even those this is a static page, we can't host it in our documentation server or we'd need
135+
// to rework how the graphql endpoint is calculated.
136+
const api = location.origin + "/graphql";
137+
console.log(api);
138+
return fetch(api, {
139+
method: "post",
140+
headers: {
141+
Accept: "application/json",
142+
"Content-Type": "application/json",
143+
},
144+
body: JSON.stringify(graphQLParams),
145+
credentials: "omit",
146+
})
147+
.then(function (response) {
148+
return response.text();
149+
})
150+
.then(function (responseBody) {
151+
try {
152+
return JSON.parse(responseBody);
153+
} catch (error) {
154+
return responseBody;
155+
}
156+
});
44157
}
45-
</style>
46-
<img src='//cdn.jsdelivr.net/npm/graphql-playground-react/build/logo.png' alt=''>
47-
<div class="loading"> Loading
48-
<span class="title">GraphQL Playground</span>
49-
</div>
50-
</div>
51-
<script>window.addEventListener('load', function (event) {
52-
GraphQLPlayground.init(document.getElementById('root'), {
53-
// options as 'endpoint' belong here
54-
endpoint: "/graphql"
55-
})
56-
})</script>
57-
</body>
58158

159+
// Render <GraphiQL /> into the body.
160+
// See the README in the top level of this module to learn more about
161+
// how you can customize GraphiQL by providing different values or
162+
// additional child elements.
163+
ReactDOM.render(
164+
React.createElement(GraphiQL, {
165+
fetcher: graphQLFetcher,
166+
query: parameters.query,
167+
variables: parameters.variables,
168+
operationName: parameters.operationName,
169+
onEditQuery: onEditQuery,
170+
onEditVariables: onEditVariables,
171+
defaultVariableEditorOpen: true,
172+
onEditOperationName: onEditOperationName,
173+
}),
174+
document.getElementById("graphiql")
175+
);
176+
</script>
177+
</body>
59178
</html>

0 commit comments

Comments
 (0)