diff --git a/packages/@jsonql/client/README.md b/packages/@jsonql/client/README.md
index 5b4bacc6e895e5a0c78d69f0c027164d980cf7cc..2381d43da61df3069b3997715496d0036b1d475a 100644
--- a/packages/@jsonql/client/README.md
+++ b/packages/@jsonql/client/README.md
@@ -18,7 +18,7 @@ jsonqlClient(config)
```
-Using the static client with pre-generated contract (works better with other frameworks)
+Using the static client with pre-generated contract (works better with Third party JS frameworks)
```js
import { jsonqlStaticClient } from '@jsonql/client/static'
@@ -27,31 +27,30 @@ import Fly from 'flyio' // or specific client to your need
const client = jsonqlStaticClient(Fly, { contract })
-client.query('helloWorld')
+client.query.helloWorld()
.then(msg => {
// you get Hello world!
})
-
```
-## Framework modules
+## Third party JS Framework modules
-We have develop several module for integrate with some of the popular js framework.
+We have developed several modules to integrate with some of the third party JS frameworks.
### Vuex module
-We add a vuex store support in version 1.5.19
+[Vuex](https://vuex.vuejs.org) store support was add in version 1.5.19
-First create a new file (let say call it `jsonql.js`)
+First create a new Vuex store file (let say call it `jsonql.js`)
```js
import contract from 'path/to/your/public-contract.json'
-import { getJsonqlVuexModule } from '@jsonql/client/vue'
+import { jsonqlVuex } from '@jsonql/client/vue'
import Fly from 'flyio'
-const jsonqlModule = getJsonqlVuexModule(Fly, { contract })
+const jsonqlVuexModule = jsonqlVuex(Fly, { contract })
-export { jsonqlModule }
+export { jsonqlVuexModule }
```
Now in your `store.js` where you define your Vuex store
@@ -62,7 +61,7 @@ import Vuex from 'vuex'
Vue.use(Vuex)
-import { jsonqlModule } from './jsonql'
+import { jsonqlVuexModule } from './jsonql'
export default new Vuex.Store({
state: {},
@@ -70,7 +69,7 @@ export default new Vuex.Store({
actions: {},
getters: {},
modules: {
- jsonqlModule
+ jsonqlVuexModule
}
})
```
@@ -89,41 +88,157 @@ export default {
name: 'test',
computed: {
hello() {
- this.getJsonqlResult('queryHelloWorld')
+ return this.getJsonqlResult('helloWorld')
}
}
actions: {
- ...mapActions('jsonqlModule', ['queryHelloWorld'])
+ ...mapActions('jsonqlVuexModule', ['helloWorld'])
},
getters: {
- ...mapGetters('jsonqlModule', ['getJsonqlResult'])
+ ...mapGetters('jsonqlVuexModule', ['getJsonqlResult'])
}
}
```
-You might be asking why the resolver name is different from the contract from `query.helloWorld` turn into `queryHelloWorld`.
-We use their type to prefix each resolvers, so you might get `query`, `mutation`, `auth` etc. This is to avoid duplicated naming.
-You can turn this off by passing a `prefix:false` in the `config` when you set up your store file:
+
+### Prefix your resolver with their type
+
+There is a little different between our core jsonql client and in the above module. Normally, the client will namespaced each
+methods under their type:
```js
-// the import
-const jsonqlModule = getJsonqlVuexModule(Fly, { contract, prefix: false })
-// the export
+jsonql()
+ .then(client => {
+ // query
+ client.query.helloWorld()
+ // mutation
+ client.mutation.updateSomething()
+ // auth
+ client.auth.login()
+ // etc
+ })
+
```
-### getters getJsonqlResult
+We try to be compatible with the Vuex (or most of the js state machine) style, we remove the namespace, and just construct
+the resolver under the client, there is one little potential danger, when you don't name each of your resolver with a unique name.
+But again this is an edge case, I don't think anyone in their right mind will have a `query.login`, `auth.login` at the same time?
+
+But when you find yourself in this situation. You can use the `prefix` option.
+
+```js
+import contract from 'path/to/your/public-contract.json'
+import { jsonqlVuex } from '@jsonql/client/vue'
+import Fly from 'flyio'
+// here we pass the prefix: true option
+const jsonqlVuexModule = jsonqlVuex(Fly, { contract, prefix: true })
+
+export { jsonqlVuexModule }
+
+```
+
+Then it will turn `query.helloWorld` into `queryHelloWorld`.
+
+```html
+
+
+ {{hello}}
+
+
+
+```
+
+If you need this option, then remember, everything will prefix with their `resolver type` name, in camel case.
+
+### Vuex getter: getJsonqlResult
-You should notice there is a getter method call `getJsonqlResult` and you pass the resolver name (with prefix or not when you turn it off).
-The reason is in the Vuex model, after we call the resolver, we store (commit) the result in our internal `result` state, and key with the resolver name. And whenever a new result return, it will get overwritten, because it's a flat object.
+You should notice there is a *Vuex getter* method call `getJsonqlResult`, and you pass the resolver name (with prefix if you use `prefix:true` option). Then you will get back the last resolver call result via this *getter*.
-Of course, you can simply call the actions and wait for the promise to resolve. You will get the same effect.
+The reason is in the Vuex model, after the call to resolver, we store (*commit*) the result in our internal `result` state, and key with the resolver name. And whenever a new result return, it will get overwritten, because it's a flat object.
-### getters getJsonqlError
+Of course, you can simply call the actions, and wait for the promise to resolve. You will get the same effect. For example:
-Whenever an error happens, we do the same like success result, we commit to our internal `error` state, and you can use this getter to get it.
-And after we commit, we will throw it again which wrap in a generic `Error`. So you can also catch it again.
+```js
+
+
+ {{hello}}
+
+
+
+
+```
+
+### Vuex getter: getJsonqlError
+
+Whenever an error happens, we do the same like success result, we commit to our internal `error` state, and you can use this *getter* to get it.
+And after we commit, we will throw it again which wrap in a generic `Error`. So you can also catch it again. For example:
+
+```js
+
+
+
{{hello}}
+
{{error}}
+