/
graphiql.go
63 lines (57 loc) · 1.61 KB
/
graphiql.go
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
package handlers
import (
"net/http"
"github.com/graphql-go/graphql"
)
func renderGraphiQL(rw http.ResponseWriter, params graphql.Params) {
_, err := rw.Write(graphiql)
if err != nil {
http.Error(rw, err.Error(), http.StatusInternalServerError)
}
return
}
var graphiql = []byte(`<html>
<head>
<title>GraphiQL</title>
<link href="https://unpkg.com/graphiql/graphiql.min.css" rel="stylesheet" />
</head>
<body style="margin: 0;">
<div id="graphiql" style="height: 100vh;"></div>
<script
crossorigin
src="https://unpkg.com/react/umd/react.production.min.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
></script>
<script
crossorigin
src="https://unpkg.com/graphiql/graphiql.js"
></script>
<script>
const url = window.location.protocol + '//' + window.location.host + window.location.pathname;
const params = new URLSearchParams(document.location.search.substring(1));
const query = params.get('query');
const variables = params.get('variables') ? JSON.parse(params.get('variables')) : undefined;
const operationName = params.get('operationName');
const graphQLFetcher = graphQLParams =>
fetch(url, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(graphQLParams),
})
.then(response => response.json())
.catch(() => response.text());
ReactDOM.render(
React.createElement(GraphiQL, {
fetcher: graphQLFetcher,
query,
operationName,
variables,
}),
document.getElementById('graphiql'),
);
</script>
</body>
</html>`)