From 6d5ce42e0ab5f3f7215146cba7f310e0d4cec62a Mon Sep 17 00:00:00 2001
From: Guillaume Chau <alphadelta.fg@gmail.com>
Date: Fri, 29 Nov 2019 15:52:35 +0100
Subject: [PATCH] feat: improved subscribeToMore

---
 .../vue-apollo-composable/src/useQuery.ts     | 48 +++++++++++++++----
 1 file changed, 39 insertions(+), 9 deletions(-)

diff --git a/packages/vue-apollo-composable/src/useQuery.ts b/packages/vue-apollo-composable/src/useQuery.ts
index 61d3069..8536cf7 100644
--- a/packages/vue-apollo-composable/src/useQuery.ts
+++ b/packages/vue-apollo-composable/src/useQuery.ts
@@ -17,6 +17,11 @@ export interface UseQueryOptions<
   enabled?: boolean
 }
 
+interface SubscribeToMoreItem {
+  options: any
+  unsubscribeFns: Function[]
+}
+
 export function useQuery<
   TResult = any,
   TVariables = OperationVariables,
@@ -77,8 +82,8 @@ export function useQuery<
       error: onError,
     })
 
-    for (const subOptions of subscribeToMoreItems) {
-      subscribeToMore(subOptions)
+    for (const item of subscribeToMoreItems) {
+      addSubscribeToMore(item)
     }
   }
 
@@ -159,20 +164,42 @@ export function useQuery<
 
   // Subscribe to more
 
-  const subscribeToMoreItems = []
+  const subscribeToMoreItems: SubscribeToMoreItem[] = []
 
   function subscribeToMore<
     TSubscriptionVariables = OperationVariables,
     TSubscriptionData = TResult
-  > (options: SubscribeToMoreOptions<TResult, TSubscriptionVariables, TSubscriptionData>) {
-    subscribeToMoreItems.push(options)
-    addSubscribeToMore(options)
+  > (
+    options: SubscribeToMoreOptions<TResult, TSubscriptionVariables, TSubscriptionData> |
+      Ref<SubscribeToMoreOptions<TResult, TSubscriptionVariables, TSubscriptionData>> |
+      ReactiveFunction<SubscribeToMoreOptions<TResult, TSubscriptionVariables, TSubscriptionData>>
+  ) {
+    const optionsRef = paramToRef(options)
+    watch(optionsRef, (value, oldValue, onCleanup) => {
+      const index = subscribeToMoreItems.findIndex(item => item.options === oldValue)
+      if (index !== -1) {
+        subscribeToMoreItems.splice(index, 1)
+      }
+      const item: SubscribeToMoreItem = {
+        options: value,
+        unsubscribeFns: [],
+      }
+      subscribeToMoreItems.push(item)
+
+      addSubscribeToMore(item)
+
+      onCleanup(() => {
+        item.unsubscribeFns.forEach(fn => fn())
+        item.unsubscribeFns = []
+      })
+    })
   }
 
-  function addSubscribeToMore (options: SubscribeToMoreOptions) {
+  function addSubscribeToMore (item: SubscribeToMoreItem) {
     if (!started) return
-    const unsubscribe = query.value.subscribeToMore(options)
+    const unsubscribe = query.value.subscribeToMore(item.options)
     onStopHandlers.push(unsubscribe)
+    item.unsubscribeFns.push(unsubscribe)
   }
 
   // Internal enabled returned to user
@@ -197,7 +224,10 @@ export function useQuery<
   })
 
   // Teardown
-  onUnmounted(stop)
+  onUnmounted(() => {
+    stop()
+    subscribeToMoreItems.length = 0
+  })
 
   return {
     result,