graphql-example/index.mjs at main · introspective-code/graphql-example · GitHub

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
import express from 'express';
import { graphqlHTTP } from 'express-graphql';
import { schema, rootValue } from './schema.mjs';

const PORT = process.env.PORT || 8000;

const app = express();
app.use(express.json());

app.listen(PORT, () => {
  console.log(`[ index.mjs] Server listening on port ${PORT}`)
});

app.get('/', (req, res, next) => {
  const template = `
    <!DOCTYPE html>
    <html>
    <head>
      <title>GraphQL Example</title>
    </head>
    <body>
      <h1>GraphQL Example</h1>
      <div id="user-cities"></div>
      <script>
        fetch('/api', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ query: \`
            query {
              getUsers {
                id
                name
                city {
                  id
                  name
                  population
                }
              }
            }\`
          }),
        })
        .then(res => res.json())
        .then(res => {
          document
            .getElementById('user-cities')
            .innerHTML = JSON.stringify(res.data.getUsers)
        });
      </script>
    </body>
    </html>
  `

  res.status(200).send(template);
});

app.use(
  '/api',
  graphqlHTTP({
    schema,
    rootValue,
    graphiql: true,
  }),
);