Merge pull request #34 from marmelab/ajax_interceptor

[WIP] Ajax interception

Author: fzaninotto

README.md

@@ -407,42 +407,36 @@ app.use('/graphql', jsonGraphqlExpress(data));
 app.listen(PORT);
 ```
 
-## Usage on client
+## Usage in browser with XMLHttpRequest
 
-Install the module locally:
-
-```sh
-npm install --save json-graphql-server
-```
+Useful when using XMLHttpRequest directly or libaries such as [axios](https://www.npmjs.com/package/axios).
 
-Then use the `graphQLClientServer` function:
+### Install with a script tag
 
-```js
-import { graphQLClientServer } from 'json-graphql-server';
+Add a `script` tag referencing the library:
 
-const data = [...];
+```html
+<script src="../lib/json-graphql-server.min.js"></script>
+```
 
-const server = GraphQLClientServer({
-    data,
-    url: 'http://localhost:3000/graphql'
-});
+It will expose the `GraphQLClientServer` as a global object:
 
-server.start();
-```
+```html
+<script type="text/javascript">
+    window.addEventListener('load', function() {
+        const data = [...];
 
-This will intercepts all XMLHttpRequests and make them responds like a GraphQL server when the url matches the one specified.
+        const server = GraphQLClientServer({
+            data,
+            url: 'http://localhost:3000/graphql'
+        });
 
-For example:
+        server.start();
 
-```js
-window.document
-    .getElementById('btnLoadPosts')
-    .addEventListener('click', function () {
-        var xhr = new XMLHttpRequest();
-        xhr.responseType = 'json';
-        xhr.open("POST", "http://localhost:3000/graphql", true);
-        xhr.setRequestHeader("Content-Type", "application/json");
-        xhr.setRequestHeader("Accept", "application/json");
+        const xhr = new XMLHttpRequest();
+        xhr.open('POST', 'http://localhost:3000/graphql', true);
+        xhr.setRequestHeader('Content-Type', 'application/json');
+        xhr.setRequestHeader('Accept', 'application/json');
         xhr.onerror = function(error) {
             console.error(error);
         }
@@ -454,31 +448,63 @@ window.document
         const body = JSON.stringify({ query: 'query allPosts { allPosts { id } }' });
         xhr.send(body);
     });
+</script>
 ```
 
-## Usage in browser through script
+### Use with a bundler (webpack)
 
-Add a `script` tag referencing the library:
-
-```html
-<script src="../lib/json-graphql-server.min.js"></script>
+```sh
+npm install json-graphql-server
 ```
 
-It will expose the `GraphQLClientServer` as a global object:
+```js
+import GraphQLClientServer from 'json-graphql-server';
 
-```html
-<script type="text/javascript">
-    window.addEventListener('load', function() {
-        const data = [...];
+const data = [...];
 
-        const server = GraphQLClientServer({
-            data,
-            url: 'http://localhost:3000/graphql'
-        });
+const server = GraphQLClientServer({
+    data,
+    url: 'http://localhost:3000/graphql'
+});
 
-        server.start();
-    });
-</script>
+server.start();
+
+const xhr = new XMLHttpRequest();
+xhr.open('POST', 'http://localhost:3000/graphql', true);
+xhr.setRequestHeader('Content-Type', 'application/json');
+xhr.setRequestHeader('Accept', 'application/json');
+xhr.onerror = function(error) {
+    console.error(error);
+}
+xhr.onload = function() {
+    const result = JSON.parse(xhr.responseText);
+    console.log('data returned:', result);
+    alert('Found ' + result.data.allPosts.length + ' posts');
+}
+const body = JSON.stringify({ query: 'query allPosts { allPosts { id } }' });
+xhr.send(body);
+```
+
+## Usage in browser with fetch
+
+```js
+import fetchMock from 'fetch-mock';
+import GraphQLClientServer from 'json-graphql-server';
+
+const data = [...];
+const server = GraphQLClientServer({ data });
+
+fetchMock.post('http://localhost:3000/graphql', server.getHandler());
+
+fetch({
+    url: 'http://localhost:3000/graphql',
+    method: 'POST',
+    body: JSON.stringify({ query: 'query allPosts { allPosts { id } }' })
+})
+.then(response => response.json())
+.then(json => {
+    alert('Found ' + result.data.allPosts.length + ' posts');
+})
 ```
 
 ## Adding Authentication, Custom Routes, etc.

example/index.html

@@ -1,6 +1,8 @@
 <!doctype html>
 <html lang="en">
-    <head></head>
+    <head>
+        <meta charset="UTF-8">
+    </head>
     <body>
         <button id="button">Load posts</button>
         <script src="../lib/json-graphql-server.min.js"></script>
@@ -33,29 +35,29 @@
                     ],
                 };
 
-                const server = GraphQLClientServer({
-                    data,
-                    url: 'http://localhost:3000/graphql'
-                });
-
-                server.start();
-            });
-            window.document.getElementById('button').addEventListener('click', function () {            
-                const xhr = new XMLHttpRequest();
-                xhr.responseType = 'json';
-                xhr.open("POST", "http://localhost:3000/graphql", true);
-                xhr.setRequestHeader("Content-Type", "application/json");
-                xhr.setRequestHeader("Accept", "application/json");
-                xhr.onerror = function(error) {
-                    console.error(error);
+                try {
+                    const server = GraphQLClientServer({ data, url: "http://localhost:3000/graphql" });
+                    server.start();
+                } catch(error) {
+                    console.error({error});
                 }
-                xhr.onload = function() {
-                    const result = JSON.parse(xhr.responseText);
-                    console.log('data returned:', result);
-                    alert('Found ' + result.data.allPosts.length + ' posts');
-                }
-                const body = JSON.stringify({ query: 'query allPosts { allPosts { id } }' });
-                xhr.send(body);
+                
+                window.document.getElementById('button').addEventListener('click', function () {            
+                    const xhr = new XMLHttpRequest();
+                    xhr.open("POST", "http://localhost:3000/graphql", true);
+                    xhr.setRequestHeader("Content-Type", "application/json");
+                    xhr.setRequestHeader("Accept", "application/json");
+                    xhr.onerror = function(error) {
+                        console.error(error);
+                    }
+                    xhr.onload = function() {
+                        const result = JSON.parse(xhr.responseText);
+                        console.log('data returned:', result);
+                        alert('Found ' + result.data.allPosts.length + ' posts');
+                    }
+                    const body = JSON.stringify({ query: 'query allPosts { allPosts { id } }' });
+                    xhr.send(body);
+                });
             });
         </script>
     </body>

package.json

@@ -62,7 +62,8 @@
         "graphql-type-json": "~0.1.4",
         "inflection": "~1.12.0",
         "lodash.merge": "~4.6.0",
-        "reify": "~0.12.0"
+        "reify": "~0.12.0",
+        "xhr-mock": "2.0.2"
     },
     "bin": {
         "json-graphql-server": "bin/json-graphql-server.js"

src/graphQLClientServer.js

@@ -1,6 +1,5 @@
-import { MockHttpServer } from './mockHttpRequest';
-import { graphql } from 'graphql';
-import schemaBuilder from './schemaBuilder';
+import mock, { proxy } from 'xhr-mock';
+import handleRequestFactory from './handleRequest';
 
 /**
  * Starts a GraphQL Server in your browser: intercepts every call to http://localhost:3000/graphql 
@@ -42,40 +41,39 @@ import schemaBuilder from './schemaBuilder';
  * GraphQLClientServer(data, 'http://localhost:8080/api/graphql');
  */
 export default function({ data, url }) {
-    const schema = schemaBuilder(data);
+    const handleRequest = handleRequestFactory(data);
 
-    const server = new MockHttpServer(req => {
-        if (!req.url.startsWith(url)) {
-            // FIXME: if req.url does not match url for endpoint, handle it with window.OriginalHttpRequest
-        }
+    return {
+        start() {
+            // Intercept all XmlHttpRequest
+            mock.setup();
 
-        const query = JSON.parse(req.requestText);
+            // Only handle POST request to the specified url
+            mock.post(
+                url,
+                (req, res) =>
+                    new Promise(resolve => {
+                        handleRequest({
+                            requestBody: req.body(),
+                            respond(status, headers, body) {
+                                res.status(status);
+                                res.headers(headers);
+                                res.body(body);
 
-        graphql(
-            schema,
-            query.query,
-            undefined,
-            undefined,
-            query.variables
-        ).then(
-            result => {
-                const body = JSON.stringify(result);
-                req.setResponseHeader('Content-Type', 'application/json');
-                req.receive(200, body);
-            },
-            error => {
-                req.setResponseHeader('Content-Type', 'application/json');
-                req.receive(500, JSON.stringify(error));
-            }
-        );
-    });
+                                resolve(res);
+                            },
+                        });
+                    })
+            );
 
-    return {
-        start: () => {
-            server.start();
+            // Ensure all other requests are handled by the default XmlHttpRequest
+            mock.use(proxy);
+        },
+        stop() {
+            mock.teardown();
         },
-        stop: () => {
-            server.stop();
+        getHandler() {
+            return handleRequest;
         },
     };
 }

src/handleRequest.js

@@ -0,0 +1,71 @@
+import { graphql } from 'graphql';
+import schemaBuilder from './schemaBuilder';
+
+/**
+ * Starts a GraphQL Server in your browser: intercepts every call to http://localhost:3000/graphql 
+ * and returns a response from the supplied data.
+ * 
+ * @export A sinon.js FakeServer (http://sinonjs.org/releases/v2.3.6/fake-xhr-and-server/#fake-server)
+ * @param {any} data 
+ * @param {any} url Specifies the endpoint to intercept (Default is 'http://localhost:3000/graphql').
+ * 
+ * @example
+ * const data = {
+ *    "posts": [
+ *        {
+ *            "id": 1,
+ *            "title": "Lorem Ipsum",
+ *            "views": 254,
+ *            "user_id": 123,
+ *        },
+ *        {
+ *            "id": 2,
+ *            "title": "Sic Dolor amet",
+ *            "views": 65,
+ *            "user_id": 456,
+ *        },
+ *    ],
+ *    "users": [
+ *        {
+ *            "id": 123,
+ *            "name": "John Doe"
+ *        },
+ *        {
+ *            "id": 456,
+ *            "name": "Jane Doe"
+ *        }
+ *    ],
+ * };
+ * 
+ * GraphQLClientServer(data);
+ * GraphQLClientServer(data, 'http://localhost:8080/api/graphql');
+ */
+export default function(data) {
+    const schema = schemaBuilder(data);
+    return request => {
+        const query = JSON.parse(request.requestBody);
+
+        return graphql(
+            schema,
+            query.query,
+            undefined,
+            undefined,
+            query.variables
+        ).then(
+            result => {
+                request.respond(
+                    200,
+                    { 'Content-Type': 'application/json' },
+                    JSON.stringify(result)
+                );
+            },
+            error => {
+                request.respond(
+                    500,
+                    { 'Content-Type': 'application/json' },
+                    JSON.stringify(error)
+                );
+            }
+        );
+    };
+}