Multiple clients & initial SSR support

Author: Akryum

README.md

@@ -18,7 +18,7 @@ Integrates [apollo](http://www.apollostack.com/) in your [Vue](http://vuejs.org)
 ## Table of contents
 
 - [Installation](#installation)
-- [Configuration](#configuration)
+- [Create a provider](#create-a-provider)
 - [Usage in components](#usage-in-components)
 - [Queries](#queries)
   - [Simple query](#simple-query)
@@ -36,14 +36,16 @@ Integrates [apollo](http://www.apollostack.com/) in your [Vue](http://vuejs.org)
   - [Skipping the subscription](#skipping-the-subscription)
 - [Pagination with `fetchMore`](#pagination-with-fetchmore)
 - [Skip all](#skip-all)
+- [Multiple clients](#multiple-clients)
+- [Server-Side Rendering](#server-side-rendering)
 
 ## Installation
 
 Try and install this packages before server side set (of packages), add apollo to meteor.js before then, too.
 
     npm install --save vue-apollo apollo-client@^0.5.0
 
-## Configuration
+In your app, create an `ApolloClient` instance and install the `VueApollo` plugin:
 
 ```javascript
 import Vue from 'vue'
@@ -60,11 +62,23 @@ const apolloClient = new ApolloClient({
 })
 
 // Install the vue plugin
-Vue.use(VueApollo, {
-  apolloClient,
+Vue.use(VueApollo)
+```
+
+## Create a provider
+
+Like `vue-router` or `vuex`, you need to specify the `apolloProvider` object on your root components. A provider holds the apollo client instances that can then be used by all the child components.
+
+```javascript
+const apolloProvider = new VueApollo({
+  defaultClient: apolloClient,
 })
 
-// Your Vue app is now Apollo-enabled!
+new Vue({
+  el: '#app',
+  apolloProvider,
+  render: h => h(App),
+})
 ```
 
 ## Usage in components
@@ -987,6 +1001,57 @@ apollo: {
 }
 ```
 
+## Multiple clients
+
+You can specify multiple apollo clients if your app needs to connect to different GraphQL endpoints:
+
+```javascript
+const apolloProvider = new VueApollo({
+  clients: {
+    a: apolloClient,
+    b: otherApolloClient,
+  },
+  defaultClient: apolloClient,
+})
+```
+
+In the component `apollo` option, you can define the client for all the queries, subscriptions and mutations with `$client` (only for this component):
+
+```javascript
+export default {
+  apollo: {
+    $client: 'b',
+  },
+}
+```
+
+You can also specify the client in individual queries, subscriptions and mutations with the `client` property in the options:
+
+```javascript
+tags: {
+  query: gql`...`,
+  client: 'b',
+}
+```
+
+## Server-Side Rendering
+
+(Work in progress)
+
+```javascript
+const ensureReady = apolloProvider.collect()
+
+new Vue({
+  el: '#app',
+  apolloProvider,
+  render: h => h(App),
+})
+
+ensureReady().then((...results) => {
+  console.log('ready', results.length)
+})
+```
+
 ---
 
 LICENCE ISC - Created by Guillaume CHAU (@Akryum)

package.json

@@ -1,8 +1,7 @@
 {
   "name": "vue-apollo",
-  "version": "2.0.0-beta.2",
   "description": "Vue apollo integration",
-  "main": "lib/vue-plugin.js",
+  "main": "lib/index.js",
   "scripts": {
     "compile": "babel --presets es2015,stage-0 -d lib/ src/",
     "prepublish": "npm run compile",
@@ -27,10 +26,10 @@
   },
   "homepage": "https://github.com/Akryum/vue-apollo#readme",
   "peerDependencies": {
-    "apollo-client": "^1.0.0-rc.7"
+    "apollo-client": "^1.0.1"
   },
   "dependencies": {
-    "graphql-tag": "^1.3.2",
+    "graphql-tag": "^2.0.0",
     "lodash.debounce": "^4.0.8",
     "lodash.omit": "^4.5.0",
     "lodash.throttle": "^4.1.1"

src/apollo-provider.js

@@ -0,0 +1,27 @@
+export class ApolloProvider {
+  constructor (options) {
+    if (!options) {
+      throw new Error('Options argument required')
+    }
+    this.clients = options.clients
+    this.defaultClient = options.defaultClient
+    this._collecting = false
+  }
+
+  collect () {
+    this._promises = []
+    this._isCollecting = true
+    return () => this._ensureReady()
+  }
+
+  _waitFor (promise) {
+    if (this._isCollecting) {
+      this._promises.push(promise)
+    }
+  }
+
+  _ensureReady () {
+    this._isCollecting = false
+    return Promise.all(this._promises)
+  }
+}

src/dollar-apollo.js

@@ -0,0 +1,145 @@
+import { SmartQuery, SmartSubscription } from './smart-apollo'
+
+export class DollarApollo {
+  constructor (vm) {
+    this._apolloSubscriptions = []
+    this._watchers = []
+
+    this.vm = vm
+    this.queries = {}
+    this.subscriptions = {}
+    this.client = undefined
+  }
+
+  get provider () {
+    return this._apolloProvider || this.vm.$root._apolloProvider
+  }
+
+  _autoCollect (query) {
+    if (this.provider._isCollecting) {
+      let sub
+      this.provider._waitFor(new Promise((resolve, reject) => {
+        sub = query.subscribe({
+          next: result => {
+            resolve(result)
+          },
+          error: error => {
+            reject(error)
+          },
+        })
+      }).then(result => {
+        sub.unsubscribe()
+        return result
+      }, error => {
+        sub.unsubscribe()
+        return error
+      }))
+    }
+    return query
+  }
+
+  query (options) {
+    return this._autoCollect(this.getClient(options).query(options))
+  }
+
+  getClient (options) {
+    if (!options || !options.client) {
+      if (typeof this.client === 'object') {
+        return this.client
+      }
+      if (this.client) {
+        if (!this.provider.clients) {
+          throw new Error(`[vue-apollo] Missing 'clients' options in 'apolloProvider'`)
+        } else {
+          const client = this.provider.clients[this.client]
+          if (!client) {
+            throw new Error(`[vue-apollo] Missing client '${this.client}' in 'apolloProvider'`)
+          }
+          return client
+        }
+      }
+      return this.provider.defaultClient
+    }
+    const client = this.provider.clients[options.client]
+    if (!client) {
+      throw new Error(`[vue-apollo] Missing client '${options.client}' in 'apolloProvider'`)
+    }
+    return client
+  }
+
+  watchQuery (options) {
+    const observable = this.getClient(options).watchQuery(options)
+    const _subscribe = observable.subscribe.bind(observable)
+    observable.subscribe = (options) => {
+      let sub = _subscribe(options)
+      this._apolloSubscriptions.push(sub)
+      return sub
+    }
+    return this._autoCollect(observable)
+  }
+
+  mutate (options) {
+    return this.getClient(options).mutate(options)
+  }
+
+  subscribe (options) {
+    const observable = this.getClient(options).subscribe(options)
+    const _subscribe = observable.subscribe.bind(observable)
+    observable.subscribe = (options) => {
+      let sub = _subscribe(options)
+      this._apolloSubscriptions.push(sub)
+      return sub
+    }
+    return observable
+  }
+
+  option (key, options) {
+    this.queries[key] = new SmartQuery(this.vm, key, options)
+  }
+
+  subscribeOption (key, options) {
+    this.subscriptions[key] = new SmartSubscription(this.vm, key, options)
+  }
+
+  defineReactiveSetter (key, func) {
+    this._watchers.push(this.vm.$watch(func, value => {
+      this[key] = value
+    }, {
+      immediate: true,
+    }))
+  }
+
+  set skipAllQueries (value) {
+    for (let key in this.queries) {
+      this.queries[key].skip = value
+    }
+  }
+
+  set skipAllSubscriptions (value) {
+    for (let key in this.subscriptions) {
+      this.subscriptions[key].skip = value
+    }
+  }
+
+  set skipAll (value) {
+    this.skipAllQueries = value
+    this.skipAllSubscriptions = value
+  }
+
+  destroy () {
+    for (const unwatch of this._watchers) {
+      unwatch()
+    }
+    for (let key in this.queries) {
+      this.queries[key].destroy()
+    }
+    for (let key in this.subscriptions) {
+      this.subscriptions[key].destroy()
+    }
+    this._apolloSubscriptions.forEach((sub) => {
+      sub.unsubscribe()
+    })
+    this._apolloSubscriptions = null
+    this.vm = null
+  }
+}