Skip to content

Commit 6bb1fb8

Browse files
thomasheyenbrockthomasheyenbrock
authored
use createGraphiQLFetcher to fix missing headers (#211)
oh thak
1 parent 7c02fdf commit 6bb1fb8

File tree

1 file changed

+76
-75
lines changed

1 file changed

+76
-75
lines changed

‎public/index.html

Lines changed: 76 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,64 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<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>SWAPI GraphQL API</title>
9-
<style>
10-
body {
11-
height: 100vh;
12-
margin: 0;
13-
overflow: hidden;
14-
}
15-
#splash {
16-
color: #333;
17-
display: flex;
18-
flex-direction: column;
19-
font-family: system, -apple-system, "San Francisco", ".SFNSDisplay-Regular", "Segoe UI", Segoe, "Segoe WP", "Helvetica Neue", helvetica, "Lucida Grande", arial, sans-serif;
20-
height: 100vh;
21-
justify-content: center;
22-
text-align: center;
23-
}
24-
</style>
25-
<link rel="icon" href="favicon.ico">
26-
<link type="text/css" href="//unpkg.com/graphiql/graphiql.min.css" rel="stylesheet" />
27-
</head>
28-
<body>
29-
<div id="splash">
30-
Loading&hellip;
31-
</div>
32-
<script src="//cdn.jsdelivr.net/es6-promise/4.0.5/es6-promise.auto.min.js"></script>
33-
<script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js"></script>
34-
<script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js"></script>
35-
<script src="//unpkg.com/graphiql/graphiql.min.js"></script>
36-
<script>
3+
<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>SWAPI GraphQL API</title>
9+
<style>
10+
body {
11+
height: 100vh;
12+
margin: 0;
13+
overflow: hidden;
14+
}
15+
#splash {
16+
color: #333;
17+
display: flex;
18+
flex-direction: column;
19+
font-family: system, -apple-system, "San Francisco",
20+
".SFNSDisplay-Regular", "Segoe UI", Segoe, "Segoe WP",
21+
"Helvetica Neue", helvetica, "Lucida Grande", arial, sans-serif;
22+
height: 100vh;
23+
justify-content: center;
24+
text-align: center;
25+
}
26+
</style>
27+
<link rel="icon" href="favicon.ico" />
28+
<link
29+
type="text/css"
30+
href="//unpkg.com/graphiql/graphiql.min.css"
31+
rel="stylesheet"
32+
/>
33+
</head>
34+
<body>
35+
<div id="splash">Loading&hellip;</div>
36+
<script src="//unpkg.com/react/umd/react.production.min.js"></script>
37+
<script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
38+
<script src="//unpkg.com/graphiql/graphiql.min.js"></script>
39+
<script>
3740
// Parse the search string to get url parameters.
3841
var search = window.location.search;
3942
var parameters = {};
40-
search.substr(1).split('&').forEach(function (entry) {
41-
var eq = entry.indexOf('=');
42-
if (eq >= 0) {
43-
parameters[decodeURIComponent(entry.slice(0, eq))] =
44-
decodeURIComponent(entry.slice(eq + 1));
45-
}
46-
});
43+
search
44+
.substr(1)
45+
.split("&")
46+
.forEach(function (entry) {
47+
var eq = entry.indexOf("=");
48+
if (eq >= 0) {
49+
parameters[decodeURIComponent(entry.slice(0, eq))] =
50+
decodeURIComponent(entry.slice(eq + 1));
51+
}
52+
});
4753

4854
// if variables was provided, try to format it.
4955
if (parameters.variables) {
5056
try {
51-
parameters.variables =
52-
JSON.stringify(JSON.parse(parameters.variables), null, 2);
57+
parameters.variables = JSON.stringify(
58+
JSON.parse(parameters.variables),
59+
null,
60+
2
61+
);
5362
} catch (e) {
5463
// Do nothing, we want to display the invalid JSON as a string, rather
5564
// than present an error.
@@ -71,50 +80,42 @@
7180
updateURL();
7281
}
7382
function updateURL() {
74-
var newSearch = '?' + Object.keys(parameters).filter(function (key) {
75-
return Boolean(parameters[key]);
76-
}).map(function (key) {
77-
return encodeURIComponent(key) + '=' +
78-
encodeURIComponent(parameters[key]);
79-
}).join('&');
83+
var newSearch =
84+
"?" +
85+
Object.keys(parameters)
86+
.filter(function (key) {
87+
return Boolean(parameters[key]);
88+
})
89+
.map(function (key) {
90+
return (
91+
encodeURIComponent(key) +
92+
"=" +
93+
encodeURIComponent(parameters[key])
94+
);
95+
})
96+
.join("&");
8097
history.replaceState(null, null, newSearch);
8198
}
8299

83-
function graphQLFetcher(graphQLParams) {
84-
// This example expects a GraphQL server at the path /graphql.
85-
// Change this to point wherever you host your GraphQL server.
86-
return fetch(parameters.fetchURL || 'https://swapi-graphql.netlify.app/.netlify/functions/index', {
87-
method: 'post',
88-
headers: {
89-
'Accept': 'application/json',
90-
'Content-Type': 'application/json'
91-
},
92-
body: JSON.stringify(graphQLParams),
93-
}).then(function (response) {
94-
return response.text();
95-
}).then(function (responseBody) {
96-
try {
97-
return JSON.parse(responseBody);
98-
} catch (error) {
99-
return responseBody;
100-
}
101-
});
102-
}
100+
const fetcher = GraphiQL.createFetcher({
101+
url:
102+
parameters.fetchURL ||
103+
"https://swapi-graphql.netlify.app/.netlify/functions/index",
104+
});
103105

104106
// Render <GraphiQL /> into the body.
105107
ReactDOM.render(
106108
React.createElement(GraphiQL, {
107-
fetcher: graphQLFetcher,
109+
fetcher: fetcher,
108110
query: parameters.query,
109111
variables: parameters.variables,
110112
operationName: parameters.operationName,
111113
onEditQuery: onEditQuery,
112114
onEditVariables: onEditVariables,
113-
onEditOperationName: onEditOperationName
115+
onEditOperationName: onEditOperationName,
114116
}),
115-
document.body,
117+
document.body
116118
);
117-
</script>
118-
</body>
119+
</script>
120+
</body>
119121
</html>
120-

0 commit comments

Comments
 (0)