-
Notifications
You must be signed in to change notification settings - Fork 0
/
graphiql-server.js
61 lines (56 loc) · 1.62 KB
/
graphiql-server.js
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
const http = require('http');
const { parse } = require('url');
// Serve GraphiQL interface
const serveGraphiQL = (res) => {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(`
<!DOCTYPE html>
<html>
<head>
<title>GraphiQL</title>
<link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
</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.min.js"
></script>
<script>
const graphQLFetcher = graphQLParams =>
fetch('http://localhost:8080/graphql', {
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 }),
document.getElementById('graphiql'),
);
</script>
</body>
</html>
`);
};
const server = http.createServer((req, res) => {
const { pathname } = parse(req.url, true);
if (pathname === '/graphiql') {
serveGraphiQL(res);
} else {
res.writeHead(404);
res.end();
}
});
server.listen(4000, () => {
console.log('Server is running at http://localhost:4000/graphiql');
});