BEtter subscribe to more inside query def + Readme changes

Author: Akryum

README.md

@@ -568,17 +568,15 @@ methods: {
         label: newTag,
       },
       // Update the cache with the result
-      // 'tagList' is the name of the query declared before
-      // that will be updated with the optimistic response
-      // and the result of the mutation
-      updateQueries: {
-        tagList: (previousResult, { mutationResult }) => {
-          // We incorporate any received result (either optimistic or real)
-          // into the 'tagList' query we set up earlier
-          return {
-            tags: [...previousResult.tags, mutationResult.data.addTag],
-          }
-        },
+      // The query will be updated with the optimistic response
+      // and then with the real result of the mutation
+      update: (store, { data: { newTag } }) => {
+        // Read the data from our cache for this query.
+        const data = store.readQuery({ query: TAGS_QUERY })
+        // Add our tag from the mutation to the end
+        data.tags.push(newTag)
+        // Write our data back to the cache.
+        store.writeQuery({ query: TAGS_QUERY, data })
       },
       // Optimistic UI
       // Will be treated as a 'fake' result as soon as the request is made
@@ -715,7 +713,38 @@ new Vue({
 
 ### subscribeToMore
 
-If you need to update a query result from a subscription, the best way is using the `subscribeToMore` query method. You can access the queries you defined in the `apollo` option with `this.$apollo.queries.<name>`, so it would look like this:
+If you need to update a query result from a subscription, the best way is using the `subscribeToMore` query method. Just add a `subscribeToMore` to your query:
+
+```javascript
+apollo: {
+  tags: {
+    query: TAGS_QUERY,
+    subscribeToMore: {
+      document: gql`subscription name($param: String!) {
+        itemAdded(param: $param) {
+          id
+          label
+        }
+      }`,
+      // Variables passed to the subscription
+      variables () {
+        // Reactive if a function (like previously)
+        return {
+          param: this.param,
+        }
+      },
+      // Mutate the previous result
+      updateQuery: (previousResult, { subscriptionData }) => {
+        // Here, return the new result from the previous with the new data
+      },
+    }
+  }
+}
+```
+
+#### Alternate usage
+
+You can access the queries you defined in the `apollo` option with `this.$apollo.queries.<name>`, so it would look like this:
 
 ```javascript
 this.$apollo.queries.tags.subscribeToMore({

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-apollo",
-  "version": "2.1.0-beta.8",
+  "version": "2.1.0-beta.9",
   "description": "Vue apollo integration",
   "main": "lib/index.js",
   "scripts": {

src/consts.js

@@ -9,4 +9,5 @@ export const VUE_APOLLO_QUERY_KEYWORDS = [
   'skip',
   'throttle',
   'debounce',
+  'subscribeToMore',
 ]

src/dollar-apollo.js

@@ -1,4 +1,5 @@
 import { SmartQuery, SmartSubscription } from './smart-apollo'
+import { reapply } from './utils'
 
 export class DollarApollo {
   constructor (vm) {
@@ -71,14 +72,27 @@ export class DollarApollo {
   }
 
   addSmartQuery (key, options) {
+    options = reapply(options, this.vm)
+
     const smart = this.queries[key] = new SmartQuery(this.vm, key, options, false)
     smart.autostart()
+
+    if (options.subscribeToMore) {
+      this.addSmartSubscription(key, {
+        ...options.subscribeToMore,
+        linkedQuery: smart,
+      })
+    }
+
     return smart
   }
 
   addSmartSubscription (key, options) {
+    options = reapply(options, this.vm)
+
     const smart = this.subscriptions[key] = new SmartSubscription(this.vm, key, options, false)
     smart.autostart()
+
     return smart
   }
 

src/smart-apollo.js

@@ -22,6 +22,15 @@ class SmartApollo {
         this.refresh()
       }))
     }
+    // Query callback
+    if (typeof this.options.document === 'function') {
+      const queryCb = this.options.document.bind(this.vm)
+      this.options.document = queryCb()
+      this._watchers.push(this.vm.$watch(queryCb, document => {
+        this.options.document = document
+        this.refresh()
+      }))
+    }
 
     if (autostart) {
       this.autostart()
@@ -142,11 +151,6 @@ export class SmartQuery extends SmartApollo {
   loading = false
 
   constructor (vm, key, options, autostart = true) {
-    // Options object callback
-    while (typeof options === 'function') {
-      options = options.call(vm)
-    }
-
     // Simple query
     if (!options.query) {
       const query = options
@@ -309,30 +313,28 @@ export class SmartSubscription extends SmartApollo {
     'error',
     'throttle',
     'debounce',
+    'linkedQuery',
   ]
 
-  constructor (vm, key, options, autostart = true) {
-    // Options object callback
-    while (typeof options === 'function') {
-      options = options.call(vm)
-    }
-
-    super(vm, key, options, autostart)
-  }
-
   executeApollo (variables) {
     if (this.sub) {
       this.sub.unsubscribe()
     }
 
-    // Create observer
-    this.observer = this.vm.$apollo.subscribe(this.generateApolloOptions(variables))
+    const apolloOptions = this.generateApolloOptions(variables)
 
-    // Create subscription
-    this.sub = this.observer.subscribe({
-      next: this.nextResult.bind(this),
-      error: this.catchError.bind(this),
-    })
+    if (this.options.linkedQuery) {
+      this.sub = this.options.linkedQuery.subscribeToMore(apolloOptions)
+    } else {
+      // Create observer
+      this.observer = this.vm.$apollo.subscribe(apolloOptions)
+
+      // Create subscription
+      this.sub = this.observer.subscribe({
+        next: this.nextResult.bind(this),
+        error: this.catchError.bind(this),
+      })
+    }
 
     super.executeApollo(variables)
   }

src/utils.js

@@ -20,3 +20,10 @@ export const debounce = factory(loDebounce)
 export function getMergedDefinition (def) {
   return Globals.Vue.util.mergeOptions({}, def)
 }
+
+export function reapply (options, context) {
+  while (typeof options === 'function') {
+    options = options.call(context)
+  }
+  return options
+}