Docs

Author: phortx

README.md

@@ -8,136 +8,12 @@ This [Vuex-ORM](https://github.com/vuex-orm/vuex-orm) plugin uses the
 [apollo-client](https://www.apollographql.com/client/) to let you sync your Vuex state with
 a [GraphQL API](http://graphql.org/)
 
-**Warning:** This is a early version of the plugin, use with care.
-
 
 ## Documentation
 
 https://vuex-orm.github.io/vuex-orm-apollo/
 
 
-## Usage
-
-```bash
-$ yarn add @vuex-orm/plugin-apollo
-```
-
-or
-
-```bash
-$ npm install --save @vuex-orm/plugin-apollo
-```
-
-Add this after registering your models to the database:
-
-```javascript
-import installVuexORMApollo from '@vuex-orm/plugin-apollo';
-VuexORM.use(installVuexORMApollo, { database: database });
-```
-
-In your component:
-
-```vue
-<template>
-    <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');
-        }
-    }
-</script>
-```
-
-
-## Possible options:
-
-- `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.
-
-
-## API
-
-While using Vuex-ORM you have to distinct between two types of operations:
-
-- Vuex operations: Retrieve or save data from or to Vuex
-- Persistence operations: Load or persist data from Vuex to the GraphQL API
-
-The following table lists all operations you can use and what they to:
-
-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')
-
-
-## Eager Loading
-
-All `belongsTo` and `hasOne` related entities are eager loaded when fetch is called. All other related entities have to 
-be added to a static field in the model called `eagerLoad` to have them eagerly loaded with fetch.
-
-Example:
-
-```javascript
-class User extends Model {
-  static entity = 'users';
-  static eagerLoad = ['posts'];
-
-  static fields () {
-    return {
-      id: this.attr(null),
-      name: this.attr(''),
-      
-      posts: this.hasMany(Post, 'userId')
-    }
-  }
-}
-```
-
-
-## Caching
-
-Apollo-Client caches same queries. To bypass caching set the second param of the `fetch` action to `true`:
-
-```
-User.dispatch('fetch', { filter: { id: 42 }, bypassCache: true });
-```
-
-
-
-## Schema expectations
-
-This plugin has an opinion 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 argument
-- The update mutation expects two arguments: The ID and the new record
-- The delete mutation expects the record ID to delete
-- Multiple records are within a `nodes` object and filtered by a `filter` argument.
-
-You can see query examples in the [project wiki](https://github.com/vuex-orm/vuex-orm-apollo/wiki/Example-Queries).
-
-
-## Special record properties
-
-This plugin adds a special property to your models: `$isPersisted`, which represents if this record is persisted on
-the server. It's true for all records except newly created ones. 
-
-
-
 ## Contribution
 
 To test this plugin in your existing project, you can use `yarn link` functionality. Run `yarn link` in your local

docs/.vuepress/config.yml

@@ -1,4 +1,31 @@
-title: Vuex-ORM Apollo Plugin Documentation
-description: 
+title: 'Vuex-ORM Apollo Plugin'
+description: 'Vue + Vuex-ORM + GraphQL = <3'
 
 base: '/vuex-orm-apollo/'
+
+themeConfig:
+  nav:
+    - text: Home
+      link: /
+
+    - text: Guide
+      link: /guide/
+
+    - text: Vuex-ORM
+      link: https://vuex-orm.github.io/vuex-orm/
+
+    - text: GitHub
+      link: https://github.com/vuex-orm/vuex-orm-apollo
+
+  sidebar:
+    - ['/guide/', 'Introduction']
+    - /guide/setup/
+    - /guide/graphql/
+    - /guide/fetch/
+    - /guide/persist/
+    - /guide/push/
+    - /guide/destroy/
+    - /guide/relationships/
+    - /guide/eager-loading/
+    - /guide/skipping-fields/
+    - /guide/meta-fields/

docs/.vuepress/dist/404.html

@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="/vuex-orm-apollo/assets/css/1.styles.9c82df48.css">
   </head>
   <body>
-    <div id="app" data-server-rendered="true"><div class="theme-container"><div class="content"><h1>404</h1><blockquote>Looks like we've got some broken links.</blockquote></div></div></div>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><div class="content"><h1>404</h1><blockquote>How did we get here?</blockquote></div></div></div>
     <script src="/vuex-orm-apollo/assets/js/app.98a767d9.js" defer></script>
   </body>
 </html>

docs/.vuepress/public/logo-vuex-orm.png

@@ -1 +1,14 @@
-# Hello VuePress
+---
+home: true
+heroImage: /logo-vuex-orm.png
+actionText: Get Started →
+actionLink: /guide/
+features:
+- title: GraphQL
+  details: This Vuex-ORM plugin uses the apollo-client to let you sync your Vuex-ORM state with a GraphQL API
+- title: Vuex-ORM
+  details: The plugin keeps up with the API and design of Vuex-ORM with full reactivity.
+- title: No boilerplate
+  details: Setup and usage of this plugin is kept as simple as possible, no clutter in your components.  
+footer: MIT Licensed
+---

docs/README.md

@@ -0,0 +1,60 @@
+# Introduction
+
+This [Vuex-ORM](https://github.com/vuex-orm/vuex-orm) plugin uses the
+[apollo-client](https://www.apollographql.com/client/) to let you sync your Vuex state with
+a [GraphQL API](http://graphql.org/).
+
+::: warning
+This plugin is in BETA stage, please use with care.
+:::
+
+
+## Actions
+
+While using Vuex-ORM with the Apollo plugin you have to distinct between two types of Vuex actions:
+
+- Vuex-ORM actions: Retrieve data from or save data to Vuex (`Vue Component <--> Vuex Store`)
+- Persistence actions: Load data from or persist data to the GraphQL API (`Vuex Store <--> GraphQL Server`)
+
+The following table lists all actions and what they to:
+
+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')
+
+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>
+</template>
+
+
+<script>
+    export default {
+        computed: {
+            users: () => store.getters['entities/users/all']()
+        },
+        
+        created() {
+            this.$store.dispatch('entities/users/fetch');
+        }
+    }
+</script>
+```
+
+
+## License
+
+Vuex ORM Apollo is open-sourced software licensed under the
+[MIT license](https://github.com/phortx/vuex-orm-apollo/blob/master/LICENSE.md).

docs/guide/README.md

@@ -0,0 +1,3 @@
+# destroy
+
+Hello.

docs/guide/destroy/README.md

@@ -0,0 +1,21 @@
+# Eager Loading
+
+All `belongsTo` and `hasOne` related entities are eager loaded when `fetch` is called. All other related entities have to 
+be added to a static field in the model called `eagerLoad` to have them eagerly loaded with fetch.
+
+Example:
+
+```javascript
+class User extends Model {
+  static entity = 'users';
+  static eagerLoad = ['posts'];
+
+  static fields () {
+    return {
+      id: this.attr(null),
+      name: this.attr(''),
+      
+      posts: this.hasMany(Post, 'userId')
+    }
+  }
+}

docs/guide/eager-loading/README.md

@@ -0,0 +1,14 @@
+# fetch
+
+::: danger
+TODO
+:::
+
+
+## Caching
+
+Apollo-Client caches same queries. To bypass caching set the second param of the `fetch` action to `true`:
+
+```
+User.dispatch('fetch', { filter: { id: 42 }, bypassCache: true });
+```

docs/guide/fetch/README.md

@@ -0,0 +1,10 @@
+# GraphQL Schema
+
+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
+- Multiple records are within a `nodes` object and filtered by a `filter` argument.