fix: fix auth/graphql errors causing errors on logout (#2772)

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

@@ -54,7 +54,8 @@ export type GQLClientErrorEvent =
  */
 export const gqlClientError$ = new Subject<GQLClientErrorEvent>()
 
-const subscriptionClient = new SubscriptionClient(BACKEND_WS_URL, {
+const createSubscriptionClient = () => {
+  return new SubscriptionClient(BACKEND_WS_URL, {
     reconnect: true,
     connectionParams: () => {
       return {
@@ -70,15 +71,10 @@ const subscriptionClient = new SubscriptionClient(BACKEND_WS_URL, {
       }
     },
   })
+}
 
-authIdToken$.subscribe(() => {
+const createHoppClient = () => {
-  subscriptionClient.client?.close()
+  const exchanges = [
-})
-
-const createHoppClient = () =>
-  createClient({
-    url: BACKEND_GQL_URL,
-    exchanges: [
     devtoolsExchange,
     dedupExchange,
     authExchange({
@@ -117,10 +113,6 @@ const createHoppClient = () =>
       },
     }),
     fetchExchange,
-      subscriptionExchange({
-        forwardSubscription: (operation) =>
-          subscriptionClient.request(operation),
-      }),
     errorExchange({
       onError(error, op) {
         gqlClientError$.next({
@@ -130,12 +122,44 @@ const createHoppClient = () =>
         })
       },
     }),
-    ],
+  ]
-  })
 
+  if (subscriptionClient) {
+    exchanges.push(
+      subscriptionExchange({
+        forwardSubscription: (operation) => {
+          return subscriptionClient!.request(operation)
+        },
+      })
+    )
+  }
+
+  return createClient({
+    url: BACKEND_GQL_URL,
+    exchanges,
+  })
+}
+
+let subscriptionClient: SubscriptionClient | null
 export const client = ref(createHoppClient())
 
-authIdToken$.subscribe(() => {
+authIdToken$.subscribe((idToken) => {
+  // triggering reconnect by closing the websocket client
+  if (idToken && subscriptionClient) {
+    subscriptionClient?.client?.close()
+  }
+
+  // creating new subscription
+  if (idToken && !subscriptionClient) {
+    subscriptionClient = createSubscriptionClient()
+  }
+
+  // closing existing subscription client.
+  if (!idToken && subscriptionClient) {
+    subscriptionClient.close()
+    subscriptionClient = null
+  }
+
   client.value = createHoppClient()
 })
 

packages/hoppscotch-app/src/helpers/teams/TeamListAdapter.ts

@@ -2,6 +2,7 @@ import * as E from "fp-ts/Either"
 import { BehaviorSubject } from "rxjs"
 import { GQLError, runGQLQuery } from "../backend/GQLClient"
 import { GetMyTeamsDocument, GetMyTeamsQuery } from "../backend/graphql"
+import { authIdToken$ } from "~/helpers/fb/auth"
 
 const BACKEND_PAGE_SIZE = 10
 const POLL_DURATION = 10000
@@ -46,6 +47,9 @@ export default class TeamListAdapter {
   }
 
   async fetchList() {
+    // if the authIdToken is not present, don't fetch the teams list, as it will fail anyway
+    if (!authIdToken$.value) return
+
     this.loading$.next(true)
 
     const results: GetMyTeamsQuery["myTeams"] = []