marmelab · slax57 · Feb 21, 2025 · Jul 31, 2024 · Feb 12, 2025 · Feb 12, 2025
diff --git a/.eslintrc b/.eslintrc
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -19,6 +19,8 @@ jobs:
     - uses: bahmutov/npm-install@v1
       with:
         install-command: yarn --immutable
+    - name: Code quality
+      run: make lint format
     - name: Unit Tests
       run: make test
       env:

diff --git a/Makefile b/Makefile
@@ -13,18 +13,22 @@ watch: ## continuously compile ES6 files to JS
 	@yarn vite build --watch
 
 test: ## Launch unit tests
-	@NODE_ENV=test NODE_OPTIONS="$$NODE_OPTIONS --experimental-vm-modules" ./node_modules/.bin/jest
+	@yarn run test
 
 watch-test: ## Launch unit tests and watch for changes
-	@NODE_ENV=test NODE_OPTIONS="$$NODE_OPTIONS --experimental-vm-modules" ./node_modules/.bin/jest --watch
+	@yarn run watch-test
+
+check: ## Lint and format the source code
+	@yarn run check
+
+lint: ## Lint the source code
+	@yarn run lint
 
 format: ## Format the source code
-	@./node_modules/.bin/eslint --fix ./src
+	@yarn run format
 
 run: ## Launch server with example data
-	@node ./bin/json-graphql-server.cjs example/data.js
+	@yarn run server
 
 build: ## Build production release
-	@yarn vite build
-	@yarn vite build -c ./vite.config.node.js
-	@yarn vite build -c ./vite.config.umd.js
+	@yarn run build
diff --git a/README.md b/README.md
@@ -102,7 +102,7 @@ Note that the server is [GraphiQL](https://github.com/graphql/graphiql) enabled,
 ## Install
 
 ```sh
-npm install json-graphql-server
+npm install -D json-graphql-server
 ```
 
 ## Generated Types and Queries
@@ -460,7 +460,7 @@ const data = {
     // ... your data
 };
 
-app.use('/graphql', jsonGraphqlExpress.default(data));
+app.use('/graphql', jsonGraphqlExpress(data));
 app.listen(PORT);
 ```
 

diff --git a/bin/json-graphql-server.cjs b/bin/json-graphql-server.cjs
@@ -1,9 +1,8 @@
 #!/usr/bin/env node
-require('reify');
 var path = require('path');
 var express = require('express');
 var cors = require('cors');
-var JsonGraphqlServer = require('../dist/json-graphql-server-node.cjs').default;
+var { jsonGraphqlExpress } = require('../dist/json-graphql-server-node.cjs');
 var dataFilePath = process.argv.length > 2 ? process.argv[2] : './data.json';
 var data = require(path.resolve(process.cwd(), dataFilePath));
 var PORT = process.env.NODE_PORT || 3000;
@@ -22,7 +21,7 @@ process.argv.forEach((arg, index) => {
 });
 
 app.use(cors());
-app.use('/', JsonGraphqlServer(data));
+app.use('/', jsonGraphqlExpress(data));
 app.listen(PORT, HOST);
 var msg = `GraphQL server running with your data at http://${HOST}:${PORT}/`;
 console.log(msg); // eslint-disable-line no-console

diff --git a/biome.json b/biome.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.7.0/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 4,
+    "ignore": ["public/*.js"]
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single"
+    }
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "suspicious": {
+        "noExplicitAny": "off"
+      }
+    },
+    "ignore": ["public/*.js"]
+  }
+}
diff --git a/example/index.html → example/browser/index.html b/example/index.html → example/browser/index.html
@@ -5,7 +5,7 @@
     </head>
     <body>
         <button id="button">Load posts</button>
-        <script src="../dist/json-graphql-server.umd.cjs"></script>
+        <script src="../../dist/json-graphql-server.umd.cjs"></script>
         <script type="text/javascript">
             window.addEventListener('load', function() {
                 const data = {

diff --git a/example/data.js → example/data.cjs b/example/data.js → example/data.cjs
diff --git a/example/node/README.md b/example/node/README.md
@@ -0,0 +1,3 @@
+# Node example
+
+Run it with `node index.mjs`
diff --git a/example/node/index.mjs b/example/node/index.mjs
@@ -0,0 +1,9 @@
+import express from 'express';
+import jsonGraphqlExpress from '../../dist/json-graphql-server-node.js';
+import data from '../data.cjs';
+
+const PORT = 3000;
+const app = express();
+
+app.use('/graphql', jsonGraphqlExpress(data));
+app.listen(PORT);
diff --git a/package.json b/package.json
@@ -27,47 +27,45 @@
     ],
     "license": "MIT",
     "scripts": {
-        "format": "make format",
+        "check": "biome check",
+        "format": "biome format --write src",
+        "lint": "biome lint --write src",
         "precommit": "lint-staged",
-        "test": "jest",
-        "watch-test": "make watch-test",
-        "server": "make run",
-        "prepublish": "make build"
+        "test": "cross-env NODE_ENV=test vitest",
+        "server": "node ./bin/json-graphql-server.cjs example/data.cjs",
+        "prepublish": "yarn build",
+        "build": "yarn build-ts && yarn build-esm-cjs && yarn build-node && yarn build-umd",
+        "build-ts": "tsc",
+        "build-esm-cjs": "vite build",
+        "build-node": "vite build -c ./vite.config.node.js",
+        "build-umd": "vite build -c ./vite.config.umd.js"
     },
     "lint-staged": {
-        "src/**/*.js": [
-            "eslint --fix",
-            "git add"
+        "*.{js,jsx,ts,tsx}": [
+            "biome check --write"
         ]
     },
     "devDependencies": {
-        "@types/jest": "^29.5.12",
-        "babel-eslint": "^10.0.3",
-        "babel-jest": "^29.7.0",
-        "eslint": "^9.0.0",
-        "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-import": "^2.29.1",
-        "eslint-plugin-jest": "^28.2.0",
-        "eslint-plugin-prettier": "^5.1.3",
-        "husky": "^9.0.11",
-        "jest": "^29.7.0",
-        "lint-staged": "^15.2.2",
-        "prettier": "^3.2.5",
-        "supertest": "^6.3.4",
-        "vite": "^5.4.12"
+        "@biomejs/biome": "1.9.4",
+        "@types/express": "^4.17.21",
+        "cross-env": "^7.0.3",
+        "husky": "^9.1.7",
+        "lint-staged": "^15.4.3",
+        "supertest": "^7.0.0",
+        "typescript": "^5.7.3",
+        "vite": "^6.1.0",
+        "vitest": "^3.0.5"
     },
     "dependencies": {
-        "@apollo/client": "^3.9.11",
-        "@graphql-tools/schema": "^10.0.3",
+        "@apollo/client": "^3.12.11",
+        "@graphql-tools/schema": "^10.0.18",
         "cors": "^2.8.5",
-        "express": "^4.20.0",
-        "graphql": "^16.8.1",
-        "graphql-http": "^1.22.1",
-        "graphql-tag": "^2.12.6",
+        "express": "^4.21.2",
+        "graphql": "^16.10.0",
+        "graphql-http": "^1.22.4",
         "graphql-type-json": "^0.3.2",
-        "inflection": "^3.0.0",
+        "inflection": "^3.0.2",
         "lodash.merge": "^4.6.2",
-        "reify": "^0.20.12",
         "xhr-mock": "^2.5.1"
     },
     "bin": {

diff --git a/src/client.js → src/client.ts b/src/client.js → src/client.ts
diff --git a/src/createApolloClient.js b/src/createApolloClient.js
diff --git a/src/createApolloClient.ts b/src/createApolloClient.ts
@@ -0,0 +1,15 @@
+import { ApolloClient, InMemoryCache } from '@apollo/client';
+import { SchemaLink } from '@apollo/client/link/schema';
+import getSchemaFromData from './introspection/getSchemaFromData';
+import type { Data } from './types';
+
+export default (data: Data) => {
+    const schema = getSchemaFromData(data);
+
+    const client = new ApolloClient({
+        cache: new InMemoryCache(),
+        link: new SchemaLink({ schema }),
+    });
+
+    return client;
+};
diff --git a/src/global.d.ts b/src/global.d.ts
@@ -0,0 +1,7 @@
+declare global {
+    interface Window {
+        JsonGraphqlServer: object;
+        jsonSchemaBuilder: object;
+    }
+}
+export default global;
diff --git a/src/graphQLClientServer.js → src/graphQLClientServer.ts b/src/graphQLClientServer.js → src/graphQLClientServer.ts
@@ -1,5 +1,6 @@
 import mock, { proxy } from 'xhr-mock';
 import handleRequestFactory from './handleRequest';
+import type { Data } from './types';
 
 /**
  * Starts a GraphQL Server in your browser: intercepts every call to http://localhost:3000/graphql
@@ -40,7 +41,7 @@ import handleRequestFactory from './handleRequest';
  * GraphQLClientServer(data);
  * GraphQLClientServer(data, 'http://localhost:8080/api/graphql');
  */
-export default function ({ data, url }) {
+export default function ({ data, url }: { data: Data; url: string }) {
     const handleRequest = handleRequestFactory(data);
 
     return {
@@ -62,7 +63,7 @@ export default function ({ data, url }) {
 
                             resolve(res);
                         });
-                    })
+                    }),
             );
 
             // Ensure all other requests are handled by the default XmlHttpRequest

diff --git a/src/graphiqlHandler.js → src/graphiqlHandler.ts b/src/graphiqlHandler.js → src/graphiqlHandler.ts
@@ -1,15 +1,17 @@
-export const graphiqlHandler = (req, res) => {
+import type { Handler } from 'express';
+
+export const graphiqlHandler: Handler = (_, res) => {
     res.writeHead(200, undefined, {
         'Content-Type': 'text/html; charset=utf-8',
     });
     return res.end(
         getGraphiqlHtml({
             endpoint: '/graphql',
-        })
+        }),
     );
 };
 
-const getGraphiqlHtml = ({ endpoint }) => `
+const getGraphiqlHtml = ({ endpoint }: { endpoint: string }) => `
 <!--
  *  Copyright (c) 2021 GraphQL Contributors
  *  All rights reserved.
@@ -82,4 +84,4 @@ const getGraphiqlHtml = ({ endpoint }) => `
       );
     </script>
   </body>
-</html>`;
+</html>`;
diff --git a/src/handleRequest.js → src/handleRequest.ts b/src/handleRequest.js → src/handleRequest.ts
@@ -1,5 +1,6 @@
 import { graphql } from 'graphql';
 import schemaBuilder from './schemaBuilder';
+import type { Data } from './types';
 
 /**
  * Starts a GraphQL Server in your browser: intercepts every call to http://localhost:3000/graphql
@@ -40,9 +41,9 @@ import schemaBuilder from './schemaBuilder';
  * GraphQLClientServer(data);
  * GraphQLClientServer(data, 'http://localhost:8080/api/graphql');
  */
-export default function (data) {
+export default function (data: Data) {
     const schema = schemaBuilder(data);
-    return (url, opts = {}) => {
+    return (url: any, opts: any = {}) => {
         let body = opts.body;
 
         if (url.requestBody) {
@@ -54,7 +55,7 @@ export default function (data) {
         return graphql({
             schema,
             source: query.query,
-            variableValues: query.variables
+            variableValues: query.variables,
         }).then(
             (result) => ({
                 status: 200,
@@ -65,7 +66,7 @@ export default function (data) {
                 status: 500,
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify(error),
-            })
+            }),
         );
     };
 }