From e7e8c397ef1fca86df9082b382ff96e4a9c93851 Mon Sep 17 00:00:00 2001
From: Akash K <57758277+amk-dev@users.noreply.github.com>
Date: Wed, 7 Dec 2022 02:29:38 +0530
Subject: [PATCH] fix: circular watcher dependencies on invite.vue causing
 infinite loop (#2871)

---
 .../src/composables/graphql.ts                | 35 +++++++++----------
 1 file changed, 16 insertions(+), 19 deletions(-)

diff --git a/packages/hoppscotch-common/src/composables/graphql.ts b/packages/hoppscotch-common/src/composables/graphql.ts
index 64794cd1c..7e80f4ca5 100644
--- a/packages/hoppscotch-common/src/composables/graphql.ts
+++ b/packages/hoppscotch-common/src/composables/graphql.ts
@@ -9,6 +9,7 @@ import {
   watchEffect,
   WatchStopHandle,
   watchSyncEffect,
+  watch,
 } from "vue"
 import {
   client,
@@ -60,9 +61,6 @@ export const useGQLQuery = <DocType, DocVarType, DocErrorType extends string>(
 
   const source: Ref<Source<OperationResult> | undefined> = ref()
 
-  // A ref used to force re-execution of the query
-  const updateTicker: Ref<boolean> = ref(true)
-
   // Toggles between true and false to cause the polling operation to tick
   const pollerTick: Ref<boolean> = ref(true)
 
@@ -96,24 +94,23 @@ export const useGQLQuery = <DocType, DocVarType, DocErrorType extends string>(
     )
   )
 
+  const rerunQuery = () => {
+    source.value = !isPaused.value
+      ? client.value.executeQuery<DocType, DocVarType>(request.value, {
+          requestPolicy: "network-only",
+        })
+      : undefined
+  }
+
   stops.push(
-    watchEffect(
+    watch(
+      pollerTick,
       () => {
-        // Just listen to the polling ticks
-        // eslint-disable-next-line no-unused-expressions
-        pollerTick.value
-
-        // Just keep track of update ticking, but don't do anything
-        // eslint-disable-next-line no-unused-expressions
-        updateTicker.value
-
-        source.value = !isPaused.value
-          ? client.value.executeQuery<DocType, DocVarType>(request.value, {
-              requestPolicy: "network-only",
-            })
-          : undefined
+        rerunQuery()
       },
-      { flush: "pre" }
+      {
+        flush: "pre",
+      }
     )
   )
 
@@ -192,7 +189,7 @@ export const useGQLQuery = <DocType, DocVarType, DocErrorType extends string>(
     }
 
     isPaused.value = false
-    updateTicker.value = !updateTicker.value
+    rerunQuery()
   }
 
   const pause = () => {