feat: fix gqlclient race condition

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

@@ -7,6 +7,7 @@ import {
   watchSyncEffect,
   WatchStopHandle,
   set,
+  isRef,
 } from "@nuxtjs/composition-api"
 import {
   createClient,
@@ -120,8 +121,8 @@ const createHoppClient = () =>
       }),
       fetchExchange,
       subscriptionExchange({
-        // @ts-expect-error: An issue with the Urql typing
         forwardSubscription: (operation) =>
+          // @ts-expect-error: An issue with the Urql typing
           subscriptionClient.request(operation),
       }),
     ],
@@ -259,8 +260,10 @@ export const useGQLQuery = <DocType, DocVarType, DocErrorType extends string>(
           onEnd(() => {
             loading.value = false
             isStale.value = false
+            console.log("end")
           }),
           subscribe((res) => {
+            if (res.operation.key === request.value.key) {
               data.value = pipe(
                 // The target
                 res.data as DocType | undefined,
@@ -292,6 +295,7 @@ export const useGQLQuery = <DocType, DocVarType, DocErrorType extends string>(
               )
 
               loading.value = false
+            }
           })
         ).unsubscribe
       )
@@ -302,8 +306,11 @@ export const useGQLQuery = <DocType, DocVarType, DocErrorType extends string>(
 
   const execute = (updatedVars?: DocVarType) => {
     if (updatedVars) {
+      if (isRef(args.variables)) {
+        args.variables.value = updatedVars
+      } else {
         set(args, "variables", updatedVars)
-      // args.variables = updatedVars as any
+      }
     }
 
     isPaused.value = false