Documentation

Author: djhi

README.md

@@ -386,7 +386,7 @@ Here is how you can use the queries and mutations generated for your data, using
 
 ## Usage with Node
 
-Install the module locally
+Install the module locally:
 
 ```sh
 npm install --save-dev json-graphql-server
@@ -407,6 +407,80 @@ app.use('/graphql', jsonGraphqlExpress(data));
 app.listen(PORT);
 ```
 
+## Usage on client
+
+Install the module locally:
+
+```sh
+npm install --save json-graphql-server
+```
+
+Then use the `graphQLClientServer` function:
+
+```js
+import { graphQLClientServer } from 'json-graphql-server';
+
+const data = [...];
+
+const server = GraphQLClientServer({
+    data,
+    url: 'http://localhost:3000/graphql'
+});
+
+server.start();
+```
+
+This will intercepts all XMLHttpRequests and make them responds like a GraphQL server when the url matches the one specified.
+
+For example:
+
+```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");
+        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 through script
+
+Add a `script` tag referencing the library:
+
+```html
+<script src="../lib/json-graphql-server.min.js"></script>
+```
+
+It will expose the `GraphQLClientServer` as a global object:
+
+```html
+<script type="text/javascript">
+    window.addEventListener('load', function() {
+        const data = [...];
+
+        const server = GraphQLClientServer({
+            data,
+            url: 'http://localhost:3000/graphql'
+        });
+
+        server.start();
+    });
+</script>
+```
+
 ## Adding Authentication, Custom Routes, etc.
 
 `json-graphql-server` doesn't deal with authentication or custom routes. But you can use your favorite middleware with Express:

example/index.html

@@ -33,10 +33,15 @@
                     ],
                 };
 
-                var server = GraphQLClientServer(data);
+                const server = GraphQLClientServer({
+                    data,
+                    url: 'http://localhost:3000/graphql'
+                });
+
+                server.start();
             });
             window.document.getElementById('button').addEventListener('click', function () {            
-                var xhr = new XMLHttpRequest();
+                const xhr = new XMLHttpRequest();
                 xhr.responseType = 'json';
                 xhr.open("POST", "http://localhost:3000/graphql", true);
                 xhr.setRequestHeader("Content-Type", "application/json");

src/graphQLClientServer.js

@@ -41,7 +41,7 @@ import schemaBuilder from './schemaBuilder';
  * GraphQLClientServer(data);
  * GraphQLClientServer(data, 'http://localhost:8080/api/graphql');
  */
-export default function(data, url = 'http://localhost:3000/graphql') {
+export default function({ data, url }) {
     const schema = schemaBuilder(data);
 
     const server = new MockHttpServer(req => {
@@ -70,5 +70,12 @@ export default function(data, url = 'http://localhost:3000/graphql') {
         );
     });
 
-    server.start();
+    return {
+        start: () => {
+            server.start();
+        },
+        stop: () => {
+            server.stop();
+        },
+    };
 }