Add convenience methods to docs

Author: phortx

docs/guide/README.md

@@ -31,10 +31,10 @@ The following table lists all actions and what they do:
 
 CRUD | Vuex Only | Persist to GraphQL API
 --| -- | --
-**R**EAD | getters['find'] & getters['findAll'] | [dispatch('fetch')](/guide/fetch)
-**C**REATE | dispatch('create') | [dispatch('persist')](/guide/persist)
-**U**PDATE | dispatch('save') | [dispatch('push')](/guide/push)
-**D**ELETE | dispatch('delete') | [dispatch('destroy')](/guide/destroy)
+**R**EAD | [`find()`](https://vuex-orm.github.io/vuex-orm/store/retrieving-data.html#get-single-data), [`all()`](https://vuex-orm.github.io/vuex-orm/store/retrieving-data.html#get-all-data), [`query()`](https://vuex-orm.github.io/vuex-orm/store/retrieving-data.html#query-builder) | [`fetch()`](/guide/fetch)
+**C**REATE | [`create()`](https://vuex-orm.github.io/vuex-orm/store/inserting-and-updating-data.html#inserts) or [`insert()`](https://vuex-orm.github.io/vuex-orm/store/inserting-and-updating-data.html#inserts) | [`$persist()`](/guide/persist)
+**U**PDATE | [`$update()`](https://vuex-orm.github.io/vuex-orm/store/inserting-and-updating-data.html#updates) | [`$push()`](/guide/push)
+**D**ELETE | [`$delete()`](https://vuex-orm.github.io/vuex-orm/store/deleting-data.html) | [`$destroy()`](/guide/destroy)
 
 See the example below to get an idea of how this plugin interacts with Vuex-ORM.
 
@@ -65,13 +65,13 @@ After [installing](/guide/setup) this plugin you can load data in your component
       /**
        * Returns all users with reactivity.
        */ 
-      users: () => User.getters['all']()
+      users: () => User.all()
     },
 
 
     async mounted() {
       // Load all users form the server
-      await User.dispatch('fetch');
+      await User.fetch();
     },
     
     
@@ -80,8 +80,7 @@ After [installing](/guide/setup) this plugin you can load data in your component
       * Deletes the user from Vuex Store and from the server. 
       */
       async destroy(user) {
-        User.dispatch('delete', user.id);
-        await User.dispatch('destroy', { id: user.id });
+        await user.$deleteAndDestroy();
       }
     }
   }

docs/guide/custom-mutations/README.md

@@ -6,7 +6,14 @@
 Along with the CRUD mutations you may want to send custom GraphQL mutations. We support this via the `mutate` action:
 
 ```javascript
-Post.dispatch('mutate', { mutation: 'upvotePost', id: post.id });
+const post = Post.query().first();
+await post.$mutate({ mutation: 'upvotePost' });
+
+// is the same as
+await Post.mutate({ mutation: 'upvotePost', id: post.id });
+
+// or
+await Post.dispatch('mutate', { mutation: 'upvotePost', id: post.id });
 ```
 
 As you can see you have to privide the mutation name and any further arguments you want to pass. In this case we send

docs/guide/destroy/README.md

@@ -2,13 +2,18 @@
 
 [[toc]]
 
+
+## $destroy()
+
 Last thing you can do with a record is to delete it on the server after deleting (`delete` action) it on the client via
 Vuex-ORM. For this use case we have the `destroy` action.
 
 Via calling
 
 ```javascript
-Post.dispatch('destroy', { id: post.id });
+await post.$destroy();
+// or
+await post.$dispatch('destroy', { id: post.id });
 ```
 
 the following GraphQL query is generated:
@@ -30,3 +35,7 @@ Variables:
 }
 ```
 
+## $deleteAndDestroy()
+
+You can also use the `$deleteAndDestroy()` action to delete the record from the store and from the server. It's just a
+short convenience method for `$delete()` and `$destroy()`.

docs/guide/faq/README.md

@@ -2,6 +2,12 @@
 
 [[toc]]
 
+
 ## Is this plugin nativescript-vue compatible?
 
 Yes, since version `0.0.38`.
+
+
+## What is `await`?
+
+It's a nice way to work with promises. See https://javascript.info/async-await.

docs/guide/fetch/README.md

@@ -2,11 +2,18 @@
 
 [[toc]]
 
-The `fetch` action is for loading data from the GraphQL API into your Vuex-Store. The simplest way to call the fetch
+The `fetch` action is for loading data from the GraphQL API into your Vuex-Store.
+
+
+## Fetching all records
+
+The simplest way to call the fetch
 method is without any arguments. This will query all records from the GraphQL API:
 
 ```javascript
-Comment.dispatch('fetch');
+await Comment.fetch();
+// or
+await Comment.dispatch('fetch')
 ```
 
 This produces the following GraphQL query:
@@ -46,7 +53,7 @@ author user loaded.
 So using the regular Vuex-ORM getters should work out of the box now:
 
 ```javascript
-const comments = Comment.getters('all');
+const comments = Comment.all();
 ```
 
 When fetching all returned records replace the respective existing records in the Vuex-ORM database.
@@ -57,7 +64,9 @@ When fetching all returned records replace the respective existing records in th
 You can also fetch single records via ID:
 
 ```javascript
-Comment.dispatch('fetch', { filter: { id: 42 }});
+await Comment.fetch({ id: 42 });
+// or
+await Comment.dispatch('fetch', { filter: { id: 42 }})
 ```
 
 It automatically recognizes, that you're requesting a single record and sends a GraphQL Query for a single record:
@@ -95,7 +104,9 @@ query Comment($id: ID!) {
 Additionally you can pass a filter object to the fetch action like this:
 
 ```javascript
-Comment.dispatch('fetch', { filter: { postId: 15, deleted: false }});
+await Comment.fetch({ postId: 15, deleted: false });
+// or
+await Comment.dispatch('fetch', { filter: { postId: 15, deleted: false }})
 ``` 
 
 This will generate the following GraphQL query:
@@ -147,7 +158,7 @@ recommend the usage of async/await.
   export default {
     // Use a computed property for the component state to keep it reactive
     computed: {
-      post: () => Post.getters('find')(1)
+      post: () => Post.find(1)
     },
     
     created () {
@@ -164,7 +175,7 @@ recommend the usage of async/await.
     methods: {
       // Loads the data from the server and stores them in the Vuex Store.
       async fetchData () {
-        await Post.dispatch('fetch', { id: this.$route.params.id });
+        await Post.fetch({ filter: { id: this.$route.params.id }});
       }
     }
   }
@@ -174,8 +185,11 @@ recommend the usage of async/await.
 
 ## Caching
 
-Apollo-Client caches same queries. To bypass caching set the second param of the `fetch` action to `true`:
+Apollo-Client caches same queries. To bypass caching set the second param of the `fetch` action to `true`
+when using the convenience method or add `bypassCache: true` to the arguments of the `dispatch()` call
 
 ```javascript
-User.dispatch('fetch', { filter: { id: 42 }, bypassCache: true });
+await Comment.fetch({ id: 42 }, true );
+// Or
+await Comment.dispatch('fetch', { filter: { id: 42 }, bypassCache: true })
 ```

docs/guide/graphql/README.md

@@ -4,12 +4,14 @@
 
 This plugin has an opinion of how the GraphQL API schema should look like:
 
-- Query for multiple records is plural camelCase: `blogPosts`.
-- Mutations begin with the verb (`create`, `update`, `delete`) and the camelCased entity: `createBlogPost` for example.
-- The create mutation expects the new record as a input type argument.
-- The update mutation expects two arguments: The ID and the new record as a input type.
-- The delete mutation expects the record ID to delete.
+- Query name for single record is singular camelCase: `blogPost`.
+- Query name for multiple records is plural camelCase: `blogPosts`.
 - Multiple records are within a `nodes` object and filtered by a `filter` argument.
+- Mutations begin with the verb (`create`, `update`, `delete`) and the camelCased entity: `createBlogPost` for example.
+- The create mutation (generated by `$persist`) expects the new record as a input type argument (`createBlogPost(blogPost: BlogPostInput!)`).
+- The update mutation (generated by `$push`) expects two arguments: The ID and the new record as a input type  (`updateBlogPost(id: ID!, blogPost: BlogPostInput!)`).
+- The delete mutation (generated by `$destroy`) expects the record ID to delete (`deleteBlogPost(id: ID!)`).
 
-You will find concrete examples of the GraphQL queries which are generated by this plugin in the
-respective chapters of this documentation.
+You will find concrete examples of the GraphQL queries which are generated by this plugin in the respective chapters of
+this documentation. Also we recommend to activate the debug mode of the plugin, which will show you the queries which
+are sent.

docs/guide/persist/README.md

@@ -9,7 +9,15 @@ the `persist` action.
 Via calling
 
 ```javascript
-Post.dispatch('persist', { id: post.id });
+const post = await Post.create({
+  content: 'Lorem Ipsum dolor sit amet',
+  title: 'Example Post',
+  user: user.query().first()
+});
+
+await post.$persist();
+// or
+await post.$dispatch('persist', { id: post.id });
 ```
 
 the post record is send to the GraphQL by generating the following query:

docs/guide/push/README.md

@@ -8,7 +8,10 @@ your server via GraphQL. For this use case we have the `push` action.
 Via calling
 
 ```javascript
-Post.dispatch('push', { data: post });
+const post = Post.query().first();
+await await post.$push();
+// or
+await post.$dispatch('push', { data: post });
 ```
 
 the post record is send to the GraphQL by generating the following query:

docs/guide/setup/README.md

@@ -2,6 +2,9 @@
 
 [[toc]]
 
+
+## Installation
+
 Installation of the Apollo plugin is easy. First add the package to your dependencies:
 
 ```bash
@@ -15,20 +18,20 @@ $ npm install --save @vuex-orm/plugin-apollo
 ```
 
 
-After that we setup the plugin. Add this after registering your models to the database:
+After that we setup the plugin. Add this after [registering your models to the database](https://vuex-orm.github.io/vuex-orm/prologue/getting-started.html#register-models-and-modules-to-the-vuex-store):
 
 ```javascript
 import VuexORMApollo from '@vuex-orm/plugin-apollo';
-VuexORM.use(VuexORMApollo, { database: database });
+VuexORM.use(VuexORMApollo, { database });
 ```
 
 ## Possible options
 
 These are the possible options to pass when calling `VuexORM.use()`:
 
 - `database` (required): The Vuex-ORM database.
-- `url` (optional, default: '/graphql'): The URL to the graphql api. Will be passed to apollo-client.
-- `debug` (optional, default: false): Set to true to activate the debug logging.
+- `url` (optional, default: `/graphql`): The URL to the graphql api. Will be passed to apollo-client.
+- `debug` (optional, default: `false`): Set to true to activate the debug logging.
 
 More options will come in future releases.