Skip to content

Commit 86ba39f

Browse files
JPrevostJPrevost
committed
Updates GraphQL Playground
This is the example code unedited from https://github.com/graphql/graphiql/blob/bcb27538d9074afdac3ff56074046965b456e57a/packages/graphiql/resources/renderExample.js We'll make our local changes in subsequent commits.
1 parent 972a2e3 commit 86ba39f

File tree

1 file changed

+161
-44
lines changed

1 file changed

+161
-44
lines changed

‎public/playground.html‎

Lines changed: 161 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,176 @@
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+
// When working locally, the example expects a GraphQL server at the path /graphql.
132+
// In a PR preview, it connects to the Star Wars API externally.
133+
// Change this to point wherever you host your GraphQL server.
134+
const isDev = window.location.hostname.match(/localhost$/);
135+
const api = isDev ? "/graphql" : "https://swapi-graphql.netlify.com/.netlify/functions/index";
136+
return fetch(api, {
137+
method: "post",
138+
headers: {
139+
Accept: "application/json",
140+
"Content-Type": "application/json",
141+
},
142+
body: JSON.stringify(graphQLParams),
143+
credentials: "omit",
144+
})
145+
.then(function (response) {
146+
return response.text();
147+
})
148+
.then(function (responseBody) {
149+
try {
150+
return JSON.parse(responseBody);
151+
} catch (error) {
152+
return responseBody;
153+
}
154+
});
44155
}
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>
58156

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

0 commit comments

Comments
 (0)