diff --git a/README.md b/README.md index fea6d69..183e11e 100644 --- a/README.md +++ b/README.md @@ -442,6 +442,7 @@ These are the available advanced options you can use: - `loadingKey` will update the component data property you pass as the value. You should initialize this property to `0` in the component `data()` hook. When the query is loading, this property will be incremented by 1; when it is no longer loading, it will be decremented by 1. That way, the property can represent a counter of currently loading queries. - `watchLoading(isLoading, countModifier)` is a hook called when the loading state of the query changes. The `countModifier` parameter is either equal to `1` when the query is loading, or `-1` when the query is no longer loading. - `manual` is a boolean to disable the automatic property update. If you use it, you then need to specify a `result` callback (see example below). +- `deep` is a boolean to use `deep: true` on Vue watchers. ```javascript @@ -460,6 +461,8 @@ apollo: { message: this.pingInput, } }, + // Variables: deep object watch + deep: false, // We use a custom update callback because // the field names don't match // By default, the 'pingMessage' attribute @@ -1106,9 +1109,9 @@ The special options begin with `$` in the `apollo` object. - `$skip` to disable all queries and subscriptions (see below) - `$skipAllQueries` to disable all queries (see below) - `$skipAllSubscriptions` to disable all subscriptions (see below) -- `$client` to use a client by default (see below) -- `$loadingKey` for a default loading key (see `loadingKey` advanced options for smart queries) +- `$deep` to watch with `deep: true` on the properties above when a function is provided - `$error` to catch errors in a default handler (see `error` advanced options for smart queries) +- `$query` to apply default options to all the queries in the component Example: @@ -1121,7 +1124,9 @@ export default { } }, apollo: { - $loadingKey: 'loading', + $query: { + loadingKey: 'loading', + }, query1: { ... }, query2: { ... }, }, @@ -1135,10 +1140,9 @@ You can define in the apollo provider a default set of options to apply to the ` const apolloProvider = new VueApollo({ defaultClient: apolloClient, defaultOptions: { - // apollo options applied to all components that are using apollo - $loadingKey: 'loading', // apollo options applied to all queries in components $query: { + loadingKey: 'loading', fetchPolicy: 'cache-and-network', }, }, diff --git a/src/dollar-apollo.js b/src/dollar-apollo.js index 3c63fa9..5986fff 100644 --- a/src/dollar-apollo.js +++ b/src/dollar-apollo.js @@ -123,11 +123,12 @@ export class DollarApollo { } } - defineReactiveSetter (key, func) { + defineReactiveSetter (key, func, deep) { this._watchers.push(this.vm.$watch(func, value => { this[key] = value }, { immediate: true, + deep, })) } diff --git a/src/index.js b/src/index.js index e2a9cc0..935c18a 100644 --- a/src/index.js +++ b/src/index.js @@ -32,13 +32,13 @@ const launch = function launch () { } } - defineReactiveSetter(this.$apollo, 'skipAll', apollo.$skipAll) - defineReactiveSetter(this.$apollo, 'skipAllQueries', apollo.$skipAllQueries) - defineReactiveSetter(this.$apollo, 'skipAllSubscriptions', apollo.$skipAllSubscriptions) - defineReactiveSetter(this.$apollo, 'client', apollo.$client) - defineReactiveSetter(this.$apollo, 'loadingKey', apollo.$loadingKey) - defineReactiveSetter(this.$apollo, 'error', apollo.$error) - defineReactiveSetter(this.$apollo, 'watchLoading', apollo.$watchLoading) + defineReactiveSetter(this.$apollo, 'skipAll', apollo.$skipAll, apollo.$deep) + defineReactiveSetter(this.$apollo, 'skipAllQueries', apollo.$skipAllQueries, apollo.$deep) + defineReactiveSetter(this.$apollo, 'skipAllSubscriptions', apollo.$skipAllSubscriptions, apollo.$deep) + defineReactiveSetter(this.$apollo, 'client', apollo.$client, apollo.$deep) + defineReactiveSetter(this.$apollo, 'loadingKey', apollo.$loadingKey, apollo.$deep) + defineReactiveSetter(this.$apollo, 'error', apollo.$error, apollo.$deep) + defineReactiveSetter(this.$apollo, 'watchLoading', apollo.$watchLoading, apollo.$deep) // Apollo Data Object.defineProperty(this, '$apolloData', { @@ -51,9 +51,11 @@ const launch = function launch () { for (let key in apollo) { if (key.charAt(0) !== '$') { let options = apollo[key] + // Default options from component if (apollo.$query) { options = Object.assign({}, apollo.$query, options) } + // Property proxy if (!hasProperty(this, key) && !hasProperty(this.$props, key) && !hasProperty(this.$data, key)) { Object.defineProperty(this, key, { get: () => this.$data.$apolloData.data[key], diff --git a/src/smart-apollo.js b/src/smart-apollo.js index da5504a..277d358 100644 --- a/src/smart-apollo.js +++ b/src/smart-apollo.js @@ -19,6 +19,8 @@ export default class SmartApollo { this._watchers.push(this.vm.$watch(queryCb, query => { this.options.query = query this.refresh() + }, { + deep: this.options.deep, })) } // Query callback @@ -28,6 +30,8 @@ export default class SmartApollo { this._watchers.push(this.vm.$watch(queryCb, document => { this.options.document = document this.refresh() + }, { + deep: this.options.deep, })) } @@ -38,6 +42,8 @@ export default class SmartApollo { this._watchers.push(this.vm.$watch(cb, context => { this.options.context = context this.refresh() + }, { + deep: this.options.deep, })) } @@ -54,6 +60,7 @@ export default class SmartApollo { if (typeof this.options.skip === 'function') { this._watchers.push(this.vm.$watch(this.options.skip.bind(this.vm), this.skipChanged.bind(this), { immediate: true, + deep: this.options.deep, })) } else if (!this.options.skip) { this.start() @@ -96,6 +103,7 @@ export default class SmartApollo { cb = this.options.debounce ? debounce(cb, this.options.debounce) : cb this.unwatchVariables = this.vm.$watch(() => this.options.variables.call(this.vm), cb, { immediate: true, + deep: this.options.deep, }) } else { this.executeApollo(this.options.variables)