fix: issue with team members list not being up to date

packages/hoppscotch-app/components/teams/Edit.vue

@@ -242,7 +242,6 @@ watch(
 watch(
   () => props.editingTeamID,
   (teamID: string) => {
-    console.log("teamID", teamID)
     teamDetails.execute({ teamID })
   }
 )
@@ -252,6 +251,7 @@ const teamDetails = useGQLQuery<GetTeamQuery, GetTeamQueryVariables, "">({
   variables: {
     teamID: props.editingTeamID,
   },
+  pollDuration: 10000,
   defer: true,
   updateSubs: computed(() => {
     if (props.editingTeamID) {
@@ -282,6 +282,17 @@ const teamDetails = useGQLQuery<GetTeamQuery, GetTeamQueryVariables, "">({
   }),
 })
 
+watch(
+  () => props.show,
+  (show) => {
+    if (!show) {
+      teamDetails.pause()
+    } else {
+      teamDetails.unpause()
+    }
+  }
+)
+
 const roleUpdates = ref<
   {
     userID: string
@@ -294,8 +305,6 @@ watch(
   () => {
     if (teamDetails.loading) return
 
-    console.log(teamDetails)
-
     const data = teamDetails.data
 
     if (E.isRight(data)) {
@@ -326,11 +335,6 @@ const updateMemberRole = (userID: string, role: TeamMemberRole) => {
   }
 }
 
-watch(
-  () => teamDetails.data,
-  (newVal) => console.log(newVal)
-)
-
 const membersList = computed(() => {
   if (teamDetails.loading) return []
 

packages/hoppscotch-app/helpers/backend/GQLClient.ts

@@ -290,6 +290,9 @@ 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)
 
@@ -330,6 +333,10 @@ export const useGQLQuery = <DocType, DocVarType, DocErrorType extends string>(
         // 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: "cache-and-network",
@@ -416,12 +423,22 @@ export const useGQLQuery = <DocType, DocVarType, DocErrorType extends string>(
       }
     }
 
+    updateTicker.value = !updateTicker.value
+  }
+
+  const pause = () => {
+    isPaused.value = true
+  }
+
+  const unpause = () => {
     isPaused.value = false
   }
 
   const response = reactive({
     loading,
     data,
+    pause,
+    unpause,
     isStale,
     execute,
   })