feat(composition): debounce + throttle

packages/docs/src/api/use-query.md

@@ -12,6 +12,8 @@
 
   - `context`: Context to be passed to link execution chain.
 
+  - `debounce`: Debounce interval in ms.
+
   - `enabled`: A boolean `Ref` to enable or disable the query.
 
   - `errorPolicy`: Customize error behavior. See [error handling](../guide-composable/error-handling).
@@ -36,6 +38,8 @@
 
   - `returnPartialData`: Allow returning incomplete data from the cache when a larger query cannot be fully satisfied by the cache, instead of returning nothing.
 
+  - `throttle`: Throttle interval in ms.
+
 ## Return
 
 - `result`: result data object.

packages/docs/src/api/use-subscription.md

@@ -10,6 +10,8 @@
 
   - `clientId`: Id of the client that should be used for this subscription if you have provided multiple clients.
 
+  - `debounce`: Debounce interval in ms.
+
   - `enabled`: A boolean `Ref` to enable or disable the subscription.
 
   - `fetchPolicy`: Customize cache behavior.
@@ -19,6 +21,8 @@
     - `network-only`: return result from network, fail if network call doesn't succeed, save to cache.
     - `no-cache`: return result from network, fail if network call doesn't succeed, don't save to cache.
 
+  - `throttle`: Throttle interval in ms.
+
 ## Return
 
 - `result`: result data object.

packages/vue-apollo-composable/package.json

@@ -31,6 +31,9 @@
     "build": "tsc --outDir dist -d",
     "prepublishOnly": "yarn build"
   },
+  "dependencies": {
+    "throttle-debounce": "^2.1.0"
+  },
   "peerDependencies": {
     "@vue/composition-api": "^0.3.2",
     "apollo-client": "^2.0.0",
@@ -40,6 +43,7 @@
     "vue": "^2.6.10"
   },
   "devDependencies": {
+    "@types/throttle-debounce": "^2.1.0",
     "@vue/composition-api": "^0.3.2",
     "typescript": "^3.7.2"
   }

packages/vue-apollo-composable/src/useQuery.ts

@@ -11,6 +11,7 @@ import {
   FetchMoreOptions,
 } from 'apollo-client'
 import { Subscription } from 'apollo-client/util/Observable'
+import { throttle, debounce } from 'throttle-debounce'
 import { useApolloClient } from './useApolloClient'
 import { ReactiveFunction } from './util/ReactiveFunction'
 import { paramToRef } from './util/paramToRef'
@@ -24,6 +25,8 @@ export interface UseQueryOptions<
 > extends Omit<WatchQueryOptions<TVariables>, 'query' | 'variables'> {
   clientId?: string
   enabled?: boolean
+  throttle?: number
+  debounce?: number
 }
 
 interface SubscribeToMoreItem {
@@ -181,7 +184,7 @@ export function useQuery<
   /**
    * Queue a restart of the query (on next tick) if it is already active
    */
-  function restart () {
+  function baseRestart () {
     if (!started || restarting) return
     restarting = true
     Vue.nextTick(() => {
@@ -193,6 +196,22 @@ export function useQuery<
     })
   }
 
+  let debouncedRestart: Function
+  function updateRestartFn () {
+    if (currentOptions.value.throttle) {
+      debouncedRestart = throttle(currentOptions.value.throttle, baseRestart)
+    } else if (currentOptions.value.debounce) {
+      debouncedRestart = debounce(currentOptions.value.debounce, baseRestart)
+    } else {
+      debouncedRestart = baseRestart
+    }
+  }
+
+  function restart () {
+    if (!debouncedRestart) updateRestartFn()
+    debouncedRestart()
+  }
+
   // Applying document
   let currentDocument: DocumentNode
   watch(documentRef, value => {
@@ -212,6 +231,12 @@ export function useQuery<
   // Applying options
   const currentOptions = ref<UseQueryOptions<TResult, TVariables>>()
   watch(() => isRef(optionsRef) ? optionsRef.value : optionsRef, value => {
+    if (currentOptions.value && (
+      currentOptions.value.throttle !== value.throttle ||
+      currentOptions.value.debounce !== value.debounce
+    )) {
+      updateRestartFn()
+    }
     currentOptions.value = value
     restart()
   }, {

packages/vue-apollo-composable/src/useSubscription.ts

@@ -4,6 +4,7 @@ import { Ref, ref, watch, isRef, onUnmounted, computed } from '@vue/composition-
 import { OperationVariables, SubscriptionOptions } from 'apollo-client'
 import { Observable, Subscription } from 'apollo-client/util/Observable'
 import { FetchResult } from 'apollo-link'
+import { throttle, debounce } from 'throttle-debounce'
 import { ReactiveFunction } from './util/ReactiveFunction'
 import { paramToRef } from './util/paramToRef'
 import { paramToReactive } from './util/paramToReactive'
@@ -16,6 +17,8 @@ export interface UseSubscriptionOptions <
 > extends Omit<SubscriptionOptions<TVariables>, 'query' | 'variables'> {
   clientId?: string
   enabled?: boolean
+  throttle?: number
+  debounce?: number
 }
 
 export function useSubscription <
@@ -97,7 +100,7 @@ export function useSubscription <
   /**
    * Queue a restart of the query (on next tick) if it is already active
    */
-  function restart () {
+  function baseRestart () {
     if (!started || restarting) return
     restarting = true
     Vue.nextTick(() => {
@@ -109,6 +112,22 @@ export function useSubscription <
     })
   }
 
+  let debouncedRestart: Function
+  function updateRestartFn () {
+    if (currentOptions.value.throttle) {
+      debouncedRestart = throttle(currentOptions.value.throttle, baseRestart)
+    } else if (currentOptions.value.debounce) {
+      debouncedRestart = debounce(currentOptions.value.debounce, baseRestart)
+    } else {
+      debouncedRestart = baseRestart
+    }
+  }
+
+  function restart () {
+    if (!debouncedRestart) updateRestartFn()
+    debouncedRestart()
+  }
+
   // Applying document
   let currentDocument: DocumentNode
   watch(documentRef, value => {
@@ -128,6 +147,12 @@ export function useSubscription <
   // Applying options
   const currentOptions = ref<UseSubscriptionOptions<TResult, TVariables>>()
   watch(() => isRef(optionsRef) ? optionsRef.value : optionsRef, value => {
+    if (currentOptions.value && (
+      currentOptions.value.throttle !== value.throttle ||
+      currentOptions.value.debounce !== value.debounce
+    )) {
+      updateRestartFn()
+    }
     currentOptions.value = value
     restart()
   }, {

yarn.lock

@@ -2393,6 +2393,11 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
   integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
 
+"@types/throttle-debounce@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@types/throttle-debounce/-/throttle-debounce-2.1.0.tgz#1c3df624bfc4b62f992d3012b84c56d41eab3776"
+  integrity sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ==
+
 "@types/ws@^6.0.0":
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/@types/ws/-/ws-6.0.4.tgz#7797707c8acce8f76d8c34b370d4645b70421ff1"