Skip to content

Commit 860ab27

Browse files
djhidjhi
authored
Merge pull request #177 from marmelab/fix-gql-16-compatibility
Fix GraphQL 16 compatibility
2 parents cdeb68d + ae0c7e0 commit 860ab27

File tree

9 files changed

+212
-72
lines changed

9 files changed

+212
-72
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ Go to http://localhost:3000/?query=%7B%20Post%28id%3A%201%29%20%7B%20id%20title%
8989
}
9090
```
9191

92-
The json-graphql-server accepts queries in GET and POST. Under the hood, it uses [the `express-graphql` module](https://github.com/graphql/express-graphql). Please refer to their documentations for details about passing variables, etc.
92+
The json-graphql-server accepts queries in GET and POST. Under the hood, it uses [the `graphql-http` module](https://graphql.org/graphql-js/graphql-http/). Please refer to their documentations for details about passing variables, etc.
9393

9494
Note that the server is [GraphiQL](https://github.com/graphql/graphiql) enabled, so you can query your server using a full-featured graphical user interface, providing autosuggest, history, etc. Just browse http://localhost:3000/ to access it.
9595

‎bin/json-graphql-server.cjs

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@ require('reify');
33
var path = require('path');
44
var express = require('express');
55
var cors = require('cors');
6-
var JsonGraphqlServer = require('../dist/json-graphql-server-node').default;
7-
6+
var JsonGraphqlServer = require('../dist/json-graphql-server-node.cjs').default;
87
var dataFilePath = process.argv.length > 2 ? process.argv[2] : './data.json';
98
var data = require(path.join(process.cwd(), dataFilePath));
109
var PORT = process.env.NODE_PORT || 3000;

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,8 @@
6161
"@graphql-tools/schema": "^10.0.3",
6262
"cors": "^2.8.5",
6363
"express": "^4.17.3",
64-
"express-graphql": "^0.9.0",
6564
"graphql": "^16.8.1",
65+
"graphql-http": "^1.22.1",
6666
"graphql-tag": "^2.12.6",
6767
"graphql-type-json": "^0.3.2",
6868
"inflection": "^3.0.0",
@@ -71,6 +71,6 @@
7171
"xhr-mock": "^2.5.1"
7272
},
7373
"bin": {
74-
"json-graphql-server": "bin/json-graphql-server.js"
74+
"json-graphql-server": "bin/json-graphql-server.cjs"
7575
}
7676
}

‎src/graphiqlHandler.js

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
export const graphiqlHandler = (req, res) => {
2+
res.writeHead(200, undefined, {
3+
'Content-Type': 'text/html; charset=utf-8',
4+
});
5+
return res.end(
6+
getGraphiqlHtml({
7+
endpoint: '/',
8+
})
9+
);
10+
};
11+
12+
const getGraphiqlHtml = ({ endpoint }) => `
13+
<!--
14+
* Copyright (c) 2021 GraphQL Contributors
15+
* All rights reserved.
16+
* Copy of https://github.com/graphql/graphiql/blob/main/examples/graphiql-cdn/index.html
17+
* https://github.com/graphql/graphiql
18+
* https://github.com/graphql/graphiql/blob/main/LICENSE
19+
-->
20+
<!doctype html>
21+
<html lang="en">
22+
<head>
23+
<title>GraphiQL</title>
24+
<style>
25+
body {
26+
height: 100%;
27+
margin: 0;
28+
width: 100%;
29+
overflow: hidden;
30+
}
31+
32+
#graphiql {
33+
height: 100vh;
34+
}
35+
</style>
36+
<script
37+
crossorigin
38+
src="https://unpkg.com/react@18/umd/react.production.min.js"
39+
></script>
40+
<script
41+
crossorigin
42+
src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
43+
></script>
44+
<!--
45+
These two files can be found in the npm module, however you may wish to
46+
copy them directly into your environment, or perhaps include them in your
47+
favored resource bundler.
48+
-->
49+
<script
50+
src="https://unpkg.com/graphiql/graphiql.min.js"
51+
type="application/javascript"
52+
></script>
53+
<link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
54+
<!--
55+
These are imports for the GraphIQL Explorer plugin.
56+
-->
57+
<script
58+
src="https://unpkg.com/@graphiql/plugin-explorer/dist/index.umd.js"
59+
crossorigin
60+
></script>
61+
62+
<link
63+
rel="stylesheet"
64+
href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css"
65+
/>
66+
</head>
67+
68+
<body>
69+
<div id="graphiql">Loading...</div>
70+
<script>
71+
const root = ReactDOM.createRoot(document.getElementById('graphiql'));
72+
const fetcher = GraphiQL.createFetcher({
73+
url: '${endpoint}',
74+
headers: { 'X-Example-Header': 'foo' },
75+
});
76+
const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
77+
root.render(
78+
React.createElement(GraphiQL, {
79+
fetcher,
80+
defaultEditorToolsVisibility: true,
81+
plugins: [explorerPlugin],
82+
}),
83+
);
84+
</script>
85+
</body>
86+
</html>`;

‎src/introspection/getTypeFromValues.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
GraphQLNonNull,
88
GraphQLString,
99
} from 'graphql';
10-
import GraphQLJSON from 'graphql-type-json';
10+
import { GraphQLJSON } from 'graphql-type-json';
1111
import DateType, { isISODateString } from './DateType';
1212

1313
const isNumeric = (value) => !isNaN(parseFloat(value)) && isFinite(value);

‎src/introspection/getTypeFromValues.spec.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
GraphQLNonNull,
88
GraphQLString,
99
} from 'graphql';
10-
import GraphQLJSON from 'graphql-type-json';
10+
import { GraphQLJSON } from 'graphql-type-json';
1111
import DateType from './DateType';
1212
import getTypeFromValues from './getTypeFromValues';
1313

‎src/jsonGraphqlExpress.js

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import graphqlHTTP from 'express-graphql';
1+
import { createHandler } from 'graphql-http/lib/use/express';
22
import schemaBuilder from './schemaBuilder';
3+
import { graphiqlHandler } from './graphiqlHandler';
34

45
/**
56
* An express middleware for a GraphQL endpoint serving data from the supplied json.
@@ -45,8 +46,18 @@ import schemaBuilder from './schemaBuilder';
4546
*
4647
* app.listen(PORT);
4748
*/
48-
export default (data) =>
49-
graphqlHTTP({
49+
export default (data) => {
50+
const graphqlHandler = createHandler({
5051
schema: schemaBuilder(data),
51-
graphiql: true,
5252
});
53+
54+
const expressMiddleware = (req, res) => {
55+
if (req.is('application/json')) {
56+
return graphqlHandler(req, res);
57+
}
58+
59+
return graphiqlHandler(req, res);
60+
};
61+
62+
return expressMiddleware;
63+
};

‎src/resolver/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { pluralize } from 'inflection';
2-
import GraphQLJSON from 'graphql-type-json';
2+
import { GraphQLJSON } from 'graphql-type-json';
33

44
import all from './Query/all';
55
import meta from './Query/meta';

0 commit comments

Comments
 (0)