More docs

Author: phortx

docs/.vuepress/config.yml

@@ -25,7 +25,8 @@ themeConfig:
     - /guide/persist/
     - /guide/push/
     - /guide/destroy/
+    - /guide/custom-mutations/
     - /guide/relationships/
     - /guide/eager-loading/
-    - /guide/skipping-fields/
+    - /guide/virtual-fields/
     - /guide/meta-fields/

docs/guide/README.md

@@ -23,36 +23,38 @@ 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')
-**C**REATE | dispatch('create') | dispatch('persist')
-**U**PDATE | dispatch('save') | dispatch('push')
-**D**ELETE | dispatch('delete') | dispatch('destroy')
+**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)
 
 See the example below to get an idea of how this plugin interacts with Vuex-ORM.
 
 
+
+
 ## Example usage
 
 After [installing](/guide/setup) this plugin you can load data in your component:
 
 ```vue
 <template>
-    <ul>
-        <li v-for="user in users" :key="user.name">{{user.name}}</li>
-    </ul>
+  <ul>
+    <li v-for="user in users" :key="user.name">{{user.name}}</li>
+  </ul>
 </template>
 
 
 <script>
-    export default {
-        computed: {
-            users: () => store.getters['entities/users/all']()
-        },
-        
-        created() {
-            this.$store.dispatch('entities/users/fetch');
-        }
+  export default {
+    computed: {
+      users: () => store.getters['entities/users/all']()
+    },
+
+    created() {
+      this.$store.dispatch('entities/users/fetch');
     }
+  }
 </script>
 ```
 

docs/guide/custom-mutations/README.md

@@ -0,0 +1,48 @@
+# Custom Mutations
+
+[[toc]]
+
+
+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 });
+```
+
+As you can see you have to privide the mutation name and any further arguments you want to pass. In this case we send
+the post id, but this could be anything. This generates the following query:
+
+
+```graphql
+mutation UpvotePost($id: ID!) {
+  upvotePost(post: $id) {
+    id
+    userId
+    content
+    title
+
+    user {
+      id
+      email
+    }
+  }
+}
+```
+
+Variables:
+
+```json
+{
+  "id": 42
+}
+```
+
+Like for all other operations, all records which are returned replace the respective existing records in the Vuex-ORM
+database.
+
+
+::: danger
+**TODO**
+
+- Example code
+:::

docs/guide/destroy/README.md

@@ -2,6 +2,38 @@
 
 [[toc]]
 
+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 });
+```
+
+the following GraphQL query is generated:
+
+
+```graphql
+mutation DeletePost($id: ID!) {
+  deletePost(id: $id) {
+    id
+  }
+}
+```
+
+Variables:
+
+```json
+{
+  "id": 42
+}
+```
+
+
 ::: danger
-TODO
+**TODO**
+
+- Example code
 :::
+

docs/guide/fetch/README.md

@@ -13,26 +13,30 @@ This produces the following GraphQL query:
 
 ```graphql
 query Comments {
-    comments {
+  comments {
+    nodes {
+      id
+      content
+      postId
+      userId
+        
+      user {
         id
-        content
+        email
+      }
 
+      post {
+        id
+        content
+        title
+      
         user {
-            id
-            email
-        }
-        
-        post {
-            id
-            content
-            title
-        
-            user {
-                id
-                email
-            }
+          id
+          email
         }
+      }
     }
+  }
 }
 ```
 
@@ -45,6 +49,15 @@ So using the regular Vuex-ORM getters should work out of the box now:
 const comments = Comment.getters('all');
 ```
 
+When fetching all returned records replace the respective existing records in the Vuex-ORM database.
+
+
+## Fetching single record
+
+::: danger
+TODO
+:::
+
 
 
 ## Filtering
@@ -58,27 +71,31 @@ Comment.dispatch('fetch', { postId: 15, deleted: false });
 This will generate the following GraphQL query:
 
 ```graphql
-query Comments($postId: !ID, $deleted: !Boolean) {
-    comments(filter: { postId: $postId, deleted: $deleted }) {
+query Comments($postId: ID!, $deleted: Boolean!) {
+  comments(filter: { postId: $postId, deleted: $deleted }) {
+    nodes {
+      id
+      content
+      postId
+      userId
+        
+      user {
+        id
+        email
+      }
+      
+      post {
         id
         content
-        
+        title
+      
         user {
-            id
-            email
-        }
-        
-        post {
-            id
-            content
-            title
-        
-            user {
-                id
-                email
-            }
+          id
+          email
         }
+      }
     }
+  }
 }
 ```
 
@@ -91,36 +108,36 @@ recommend the usage of async/await.
 ```vue
 <template>
   <div class="post" v-if="post">
-      <h1>{{ post.title }}</h1>
-      <p>{{ post.body }}</p>
+    <h1>{{ post.title }}</h1>
+    <p>{{ post.body }}</p>
   </div>
 </template>
 
 <script>
-    export default {
-        // Use a computed property for the component state to keep it reactive
-        computed: {
-            post: () => Post.getters('find')(1)
-        },
-      
-        created () {
-            // fetch the data when the view is created and the data is
-            // already being observed
-            this.fetchData();
-        },
-      
-        watch: {
-            // call again the method if the route changes
-            '$route': 'fetchData'
-        },
-      
-        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 });
-            }
-        }
+  export default {
+    // Use a computed property for the component state to keep it reactive
+    computed: {
+      post: () => Post.getters('find')(1)
+    },
+    
+    created () {
+      // fetch the data when the view is created and the data is
+      // already being observed
+      this.fetchData();
+    },
+    
+    watch: {
+      // call again the method if the route changes
+      '$route': 'fetchData'
+    },
+    
+    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 });
+      }
     }
+  }
 </script>
 ```
 

docs/guide/persist/README.md

@@ -2,6 +2,57 @@
 
 [[toc]]
 
+
+After creating a new record via Vuex-ORM you may want to save it to your server via GraphQL. For this use case we have
+the `persist` action.
+
+Via calling
+
+```javascript
+Post.dispatch('persist', { id: post.id });
+```
+
+the post record is send to the GraphQL by generating the following query:
+
+
+```graphql
+mutation CreatePost($post: PostInput!) {
+  createPost(post: $post) {
+    id
+    userId
+    content
+    title
+
+    user {
+      id
+      email
+    }
+  }
+}
+```
+
+Variables:
+
+```json
+{
+  "post": {
+    "id": 42,
+    "userId": 15,
+    "content": "Lorem Ipsum dolor sit amet",
+    "title": "Example Post",
+    "user": {
+      "id": 15,
+      "email": "example@example.com"
+    }
+  }
+}
+```
+
+Like when pushing, all records which are returned replace the respective existing records in the Vuex-ORM database.
+
+
 ::: danger
-TODO
+**TODO**
+
+- Example code
 :::