refactor: migration teams adapters to urql

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

@@ -30,6 +30,7 @@ import * as E from "fp-ts/Either"
 import * as TE from "fp-ts/TaskEither"
 import { pipe, constVoid } from "fp-ts/function"
 import { Source, subscribe, pipe as wonkaPipe, onEnd } from "wonka"
+import { Subject } from "rxjs"
 import { keyDefs } from "./caching/keys"
 import { optimisticDefs } from "./caching/optimistic"
 import { updatesDef } from "./caching/updates"
@@ -122,7 +123,6 @@ const createHoppClient = () =>
       fetchExchange,
       subscriptionExchange({
         forwardSubscription: (operation) =>
-          // @ts-expect-error: An issue with the Urql typing
           subscriptionClient.request(operation),
       }),
     ],
@@ -145,6 +145,11 @@ type UseQueryOptions<T = any, V = object> = {
   pollDuration?: number | undefined
 }
 
+type RunQueryOptions<T = any, V = object> = {
+  query: TypedDocumentNode<T, V>
+  variables?: V
+}
+
 /**
  * A wrapper type for defining errors possible in a GQL operation
  */
@@ -158,6 +163,104 @@ export type GQLError<T extends string> =
       error: T
     }
 
+export const runGQLQuery = <DocType, DocVarType, DocErrorType extends string>(
+  args: RunQueryOptions<DocType, DocVarType>
+): Promise<E.Either<GQLError<DocErrorType>, DocType>> => {
+  const request = createRequest<DocType, DocVarType>(args.query, args.variables)
+  const source = client.value.executeQuery(request)
+
+  return new Promise((resolve) => {
+    const sub = wonkaPipe(
+      source,
+      subscribe((res) => {
+        if (sub) {
+          sub.unsubscribe()
+        }
+
+        pipe(
+          // The target
+          res.data as DocType | undefined,
+          // Define what happens if data does not exist (it is an error)
+          E.fromNullable(
+            pipe(
+              // Take the network error value
+              res.error?.networkError,
+              // If it null, set the left to the generic error name
+              E.fromNullable(res.error?.message),
+              E.match(
+                // The left case (network error was null)
+                (gqlErr) =>
+                  <GQLError<DocErrorType>>{
+                    type: "gql_error",
+                    error: parseGQLErrorString(gqlErr ?? "") as DocErrorType,
+                  },
+                // The right case (it was a GraphQL Error)
+                (networkErr) =>
+                  <GQLError<DocErrorType>>{
+                    type: "network_error",
+                    error: networkErr,
+                  }
+              )
+            )
+          ),
+          resolve
+        )
+      })
+    )
+  })
+}
+
+export const runGQLSubscription = <
+  DocType,
+  DocVarType,
+  DocErrorType extends string
+>(
+  args: RunQueryOptions<DocType, DocVarType>
+) => {
+  const result$ = new Subject<E.Either<GQLError<DocErrorType>, DocType>>()
+
+  const source = client.value.executeSubscription(
+    createRequest(args.query, args.variables)
+  )
+
+  wonkaPipe(
+    source,
+    subscribe((res) => {
+      result$.next(
+        pipe(
+          // The target
+          res.data as DocType | undefined,
+          // Define what happens if data does not exist (it is an error)
+          E.fromNullable(
+            pipe(
+              // Take the network error value
+              res.error?.networkError,
+              // If it null, set the left to the generic error name
+              E.fromNullable(res.error?.message),
+              E.match(
+                // The left case (network error was null)
+                (gqlErr) =>
+                  <GQLError<DocErrorType>>{
+                    type: "gql_error",
+                    error: parseGQLErrorString(gqlErr ?? "") as DocErrorType,
+                  },
+                // The right case (it was a GraphQL Error)
+                (networkErr) =>
+                  <GQLError<DocErrorType>>{
+                    type: "network_error",
+                    error: networkErr,
+                  }
+              )
+            )
+          )
+        )
+      )
+    })
+  )
+
+  return result$
+}
+
 export const useGQLQuery = <DocType, DocVarType, DocErrorType extends string>(
   _args: UseQueryOptions<DocType, DocVarType>
 ) => {

packages/hoppscotch-app/helpers/backend/gql/queries/GetCollectionChildren.graphql

@@ -0,0 +1,8 @@
+query GetCollectionChildren($collectionID: ID!) {
+  collection(collectionID: $collectionID) {
+    children {
+      id
+      title
+    }
+  }
+}

packages/hoppscotch-app/helpers/backend/gql/queries/GetCollectionRequests.graphql

@@ -0,0 +1,7 @@
+query GetCollectionRequests($collectionID: ID!, $cursor: ID) {
+  requestsInCollection(collectionID: $collectionID, cursor: $cursor) {
+    id
+    title
+    request
+  }
+}

packages/hoppscotch-app/helpers/backend/gql/queries/GetTeamMembers.graphql

@@ -0,0 +1,12 @@
+query GetTeamMembers($teamID: ID!, $cursor: ID) {
+  team(teamID: $teamID) {
+    members(cursor: $cursor) {
+      membershipID
+      user {
+        uid
+        email
+      }
+      role
+    }
+  }
+}

packages/hoppscotch-app/helpers/backend/gql/queries/RootCollectionsOfTeam.graphql

@@ -0,0 +1,6 @@
+query RootCollectionsOfTeam($teamID: ID!, $cursor: ID) {
+  rootCollectionsOfTeam(teamID: $teamID, cursor: $cursor) {
+    id
+    title
+  }
+}

packages/hoppscotch-app/helpers/backend/gql/subscriptions/TeamCollectionAdded.graphql

@@ -0,0 +1,9 @@
+subscription TeamCollectionAdded($teamID: ID!) {
+  teamCollectionAdded(teamID: $teamID) {
+    id
+    title
+    parent {
+      id
+    }
+  }
+}

packages/hoppscotch-app/helpers/backend/gql/subscriptions/TeamCollectionRemoved.graphql

@@ -0,0 +1,3 @@
+subscription TeamCollectionRemoved($teamID: ID!) {
+  teamCollectionRemoved(teamID: $teamID)
+}

packages/hoppscotch-app/helpers/backend/gql/subscriptions/TeamCollectionUpdated.graphql

@@ -0,0 +1,9 @@
+subscription TeamCollectionUpdated($teamID: ID!) {
+  teamCollectionUpdated(teamID: $teamID) {
+    id
+    title
+    parent {
+      id
+    }
+  }
+}

packages/hoppscotch-app/helpers/backend/gql/subscriptions/TeamMemberAdded.graphql

@@ -1,5 +1,10 @@
 subscription TeamMemberAdded($teamID: ID!) {
   teamMemberAdded(teamID: $teamID) {
     membershipID
+    user {
+      uid
+      email
+    }
+    role
   }
 }

packages/hoppscotch-app/helpers/backend/gql/subscriptions/TeamMemberUpdated.graphql

@@ -1,5 +1,10 @@
 subscription TeamMemberUpdated($teamID: ID!) {
   teamMemberUpdated(teamID: $teamID) {
     membershipID
+    user {
+      uid
+      email
+    }
+    role
   }
 }

packages/hoppscotch-app/helpers/backend/gql/subscriptions/TeamRequestAdded.graphql

@@ -0,0 +1,8 @@
+subscription TeamRequestAdded($teamID: ID!) {
+  teamRequestAdded(teamID: $teamID) {
+    id
+    collectionID
+    request
+    title
+  }
+}

packages/hoppscotch-app/helpers/backend/gql/subscriptions/TeamRequestDeleted.graphql

@@ -0,0 +1,3 @@
+subscription TeamRequestDeleted($teamID: ID!) {
+  teamRequestDeleted(teamID: $teamID)
+}

packages/hoppscotch-app/helpers/backend/gql/subscriptions/TeamRequestUpdated.graphql

@@ -0,0 +1,8 @@
+subscription TeamRequestUpdated($teamID: ID!) {
+  teamRequestUpdated(teamID: $teamID) {
+    id
+    collectionID
+    request
+    title
+  }
+}

packages/hoppscotch-app/helpers/teams/TeamCollectionAdapter.ts

@@ -1,24 +1,24 @@
-import { BehaviorSubject } from "rxjs"
+import * as E from "fp-ts/Either"
-import { gql } from "graphql-tag"
+import { BehaviorSubject, Subscription } from "rxjs"
+import { translateToNewRequest } from "@hoppscotch/data"
 import pull from "lodash/pull"
 import remove from "lodash/remove"
-import { translateToNewRequest } from "@hoppscotch/data"
+import { runGQLQuery, runGQLSubscription } from "../backend/GQLClient"
 import { TeamCollection } from "./TeamCollection"
 import { TeamRequest } from "./TeamRequest"
 import {
-  rootCollectionsOfTeam,
+  RootCollectionsOfTeamDocument,
-  getCollectionChildren,
+  TeamCollectionAddedDocument,
-  getCollectionRequests,
+  TeamCollectionUpdatedDocument,
-} from "./utils"
+  TeamCollectionRemovedDocument,
-import { apolloClient } from "~/helpers/apollo"
+  TeamRequestAddedDocument,
+  TeamRequestUpdatedDocument,
+  TeamRequestDeletedDocument,
+  GetCollectionChildrenDocument,
+  GetCollectionRequestsDocument,
+} from "~/helpers/backend/graphql"
 
-/*
+const TEAMS_BACKEND_PAGE_SIZE = 10
- * NOTE: These functions deal with REFERENCES to objects and mutates them, for a simpler implementation.
- * Be careful when you play with these.
- *
- * I am not a fan of mutating references but this is so much simpler compared to mutating clones
- * - Andrew
- */
 
 /**
  * Finds the parent of a collection and returns the REFERENCE (or null)
@@ -76,32 +76,49 @@ function findCollInTree(
 }
 
 /**
- * Finds and returns a REFERENCE to the collection containing a given request ID in tree (or null)
+ * Deletes a collection in the tree
  *
- * @param {TeamCollection[]} tree - The tree to look in
+ * @param {TeamCollection[]} tree - The tree to delete in (THIS WILL BE MUTATED!)
- * @param {string} reqID - The ID of the request to look for
+ * @param {string} targetID - ID of the collection to delete
- *
- * @returns REFERENCE to the collection or null if request not found
  */
-function findCollWithReqIDInTree(
+function deleteCollInTree(tree: TeamCollection[], targetID: string) {
-  tree: TeamCollection[],
+  // Get the parent owning the collection
-  reqID: string
+  const parent = findParentOfColl(tree, targetID)
-): TeamCollection | null {
-  for (const coll of tree) {
-    // Check in root collections (if expanded)
-    if (coll.requests) {
-      if (coll.requests.find((req) => req.id === reqID)) return coll
-    }
 
-    // Check in children of collections
+  // If we found a parent, update it
-    if (coll.children) {
+  if (parent && parent.children) {
-      const result = findCollWithReqIDInTree(coll.children, reqID)
+    parent.children = parent.children.filter((coll) => coll.id !== targetID)
-      if (result) return result
-    }
   }
 
-  // No matches
+  // If there is no parent, it could mean:
-  return null
+  //  1. The collection with that ID does not exist
+  //  2. The collection is in root (therefore, no parent)
+
+  // Let's look for element, if not exist, then stop
+  const el = findCollInTree(tree, targetID)
+  if (!el) return
+
+  // Collection exists, so this should be in root, hence removing element
+  pull(tree, el)
+}
+
+/**
+ * Updates a collection in the tree with the specified data
+ *
+ * @param {TeamCollection[]} tree - The tree to update in (THIS WILL BE MUTATED!)
+ * @param {Partial<TeamCollection> & Pick<TeamCollection, "id">} updateColl - An object defining all the fields that should be updated (ID is required to find the target collection)
+ */
+function updateCollInTree(
+  tree: TeamCollection[],
+  updateColl: Partial<TeamCollection> & Pick<TeamCollection, "id">
+) {
+  const el = findCollInTree(tree, updateColl.id)
+
+  // If no match, stop the operation
+  if (!el) return
+
+  // Update all the specified keys
+  Object.assign(el, updateColl)
 }
 
 /**
@@ -135,78 +152,47 @@ function findReqInTree(
 }
 
 /**
- * Updates a collection in the tree with the specified data
+ * Finds and returns a REFERENCE to the collection containing a given request ID in tree (or null)
  *
- * @param {TeamCollection[]} tree - The tree to update in (THIS WILL BE MUTATED!)
+ * @param {TeamCollection[]} tree - The tree to look in
- * @param {Partial<TeamCollection> & Pick<TeamCollection, "id">} updateColl - An object defining all the fields that should be updated (ID is required to find the target collection)
+ * @param {string} reqID - The ID of the request to look for
+ *
+ * @returns REFERENCE to the collection or null if request not found
  */
-function updateCollInTree(
+function findCollWithReqIDInTree(
   tree: TeamCollection[],
-  updateColl: Partial<TeamCollection> & Pick<TeamCollection, "id">
+  reqID: string
-) {
+): TeamCollection | null {
-  const el = findCollInTree(tree, updateColl.id)
+  for (const coll of tree) {
+    // Check in root collections (if expanded)
+    if (coll.requests) {
+      if (coll.requests.find((req) => req.id === reqID)) return coll
+    }
 
-  // If no match, stop the operation
+    // Check in children of collections
-  if (!el) return
+    if (coll.children) {
-
+      const result = findCollWithReqIDInTree(coll.children, reqID)
-  // Update all the specified keys
+      if (result) return result
-  Object.assign(el, updateColl)
+    }
-}
-
-/**
- * Deletes a collection in the tree
- *
- * @param {TeamCollection[]} tree - The tree to delete in (THIS WILL BE MUTATED!)
- * @param {string} targetID - ID of the collection to delete
- */
-function deleteCollInTree(tree: TeamCollection[], targetID: string) {
-  // Get the parent owning the collection
-  const parent = findParentOfColl(tree, targetID)
-
-  // If we found a parent, update it
-  if (parent && parent.children) {
-    parent.children = parent.children.filter((coll) => coll.id !== targetID)
   }
 
-  // If there is no parent, it could mean:
+  // No matches
-  //  1. The collection with that ID does not exist
+  return null
-  //  2. The collection is in root (therefore, no parent)
-
-  // Let's look for element, if not exist, then stop
-  const el = findCollInTree(tree, targetID)
-  if (!el) return
-
-  // Collection exists, so this should be in root, hence removing element
-  pull(tree, el)
 }
 
-/**
+export default class NewTeamCollectionAdapter {
- * TeamCollectionAdapter provides a reactive collections list for a specific team
- */
-export default class TeamCollectionAdapter {
-  /**
-   * The reactive list of collections
-   *
-   * A new value is emitted when there is a change
-   * (Use views instead)
-   */
   collections$: BehaviorSubject<TeamCollection[]>
 
-  // Fields for subscriptions, used for destroying once not needed
+  private teamCollectionAdded$: Subscription | null
-  private teamCollectionAdded$: ZenObservable.Subscription | null
+  private teamCollectionUpdated$: Subscription | null
-  private teamCollectionUpdated$: ZenObservable.Subscription | null
+  private teamCollectionRemoved$: Subscription | null
-  private teamCollectionRemoved$: ZenObservable.Subscription | null
+  private teamRequestAdded$: Subscription | null
-  private teamRequestAdded$: ZenObservable.Subscription | null
+  private teamRequestUpdated$: Subscription | null
-  private teamRequestUpdated$: ZenObservable.Subscription | null
+  private teamRequestDeleted$: Subscription | null
-  private teamRequestDeleted$: ZenObservable.Subscription | null
 
-  /**
-   * @constructor
-   *
-   * @param {string | null} teamID - ID of the team to listen to, or null if none decided and the adapter should stand by
-   */
   constructor(private teamID: string | null) {
     this.collections$ = new BehaviorSubject<TeamCollection[]>([])
+
     this.teamCollectionAdded$ = null
     this.teamCollectionUpdated$ = null
     this.teamCollectionRemoved$ = null
@@ -217,15 +203,11 @@ export default class TeamCollectionAdapter {
     if (this.teamID) this.initialize()
   }
 
-  /**
-   * Updates the team the adapter is looking at
-   *
-   * @param {string | null} newTeamID - ID of the team to listen to, or null if none decided and the adapter should stand by
-   */
   changeTeamID(newTeamID: string | null) {
+    this.teamID = newTeamID
     this.collections$.next([])
 
-    this.teamID = newTeamID
+    this.unsubscribeSubscriptions()
 
     if (this.teamID) this.initialize()
   }
@@ -243,22 +225,11 @@ export default class TeamCollectionAdapter {
     this.teamRequestUpdated$?.unsubscribe()
   }
 
-  /**
-   * Initializes the adapter
-   */
   private async initialize() {
     await this.loadRootCollections()
     this.registerSubscriptions()
   }
 
-  /**
-   * Loads the root collections
-   */
-  private async loadRootCollections(): Promise<void> {
-    const colls = await rootCollectionsOfTeam(apolloClient, this.teamID)
-    this.collections$.next(colls)
-  }
-
   /**
    * Performs addition of a collection to the tree
    *
@@ -288,6 +259,44 @@ export default class TeamCollectionAdapter {
     this.collections$.next(tree)
   }
 
+  private async loadRootCollections() {
+    if (this.teamID === null) throw new Error("Team ID is null")
+
+    const totalCollections: TeamCollection[] = []
+
+    while (true) {
+      const result = await runGQLQuery({
+        query: RootCollectionsOfTeamDocument,
+        variables: {
+          teamID: this.teamID,
+          cursor:
+            totalCollections.length > 0
+              ? totalCollections[totalCollections.length - 1].id
+              : undefined,
+        },
+      })
+
+      if (E.isLeft(result))
+        throw new Error(`Error fetching root collections: ${result}`)
+
+      totalCollections.push(
+        ...result.right.rootCollectionsOfTeam.map(
+          (x) =>
+            <TeamCollection>{
+              ...x,
+              children: null,
+              requests: null,
+            }
+        )
+      )
+
+      if (result.right.rootCollectionsOfTeam.length !== TEAMS_BACKEND_PAGE_SIZE)
+        break
+    }
+
+    this.collections$.next(totalCollections)
+  }
+
   /**
    * Updates an existing collection in tree
    *
@@ -337,25 +346,6 @@ export default class TeamCollectionAdapter {
     this.collections$.next(tree)
   }
 
-  /**
-   * Removes a request from the tree
-   *
-   * @param {string} requestID - ID of the request to remove
-   */
-  private removeRequest(requestID: string) {
-    const tree = this.collections$.value
-
-    // Find request in tree, don't attempt if no collection or no requests (expansion?)
-    const coll = findCollWithReqIDInTree(tree, requestID)
-    if (!coll || !coll.requests) return
-
-    // Remove the collection
-    remove(coll.requests, (req) => req.id === requestID)
-
-    // Publish new tree
-    this.collections$.next(tree)
-  }
-
   /**
    * Updates the request in tree
    *
@@ -376,143 +366,121 @@ export default class TeamCollectionAdapter {
   }
 
   /**
-   * Registers the subscriptions to listen to team collection updates
+   * Removes a request from the tree
+   *
+   * @param {string} requestID - ID of the request to remove
    */
-  registerSubscriptions() {
+  private removeRequest(requestID: string) {
-    this.teamCollectionAdded$ = apolloClient
+    const tree = this.collections$.value
-      .subscribe({
-        query: gql`
-          subscription TeamCollectionAdded($teamID: ID!) {
-            teamCollectionAdded(teamID: $teamID) {
-              id
-              title
-              parent {
-                id
-              }
-            }
-          }
-        `,
-        variables: {
-          teamID: this.teamID,
-        },
-      })
-      .subscribe(({ data }) => {
-        this.addCollection(
-          {
-            id: data.teamCollectionAdded.id,
-            children: null,
-            requests: null,
-            title: data.teamCollectionAdded.title,
-          },
-          data.teamCollectionAdded.parent?.id
-        )
-      })
 
-    this.teamCollectionUpdated$ = apolloClient
+    // Find request in tree, don't attempt if no collection or no requests (expansion?)
-      .subscribe({
+    const coll = findCollWithReqIDInTree(tree, requestID)
-        query: gql`
+    if (!coll || !coll.requests) return
-          subscription TeamCollectionUpdated($teamID: ID!) {
-            teamCollectionUpdated(teamID: $teamID) {
-              id
-              title
-              parent {
-                id
-              }
-            }
-          }
-        `,
-        variables: {
-          teamID: this.teamID,
-        },
-      })
-      .subscribe(({ data }) => {
-        this.updateCollection({
-          id: data.teamCollectionUpdated.id,
-          title: data.teamCollectionUpdated.title,
-        })
-      })
 
-    this.teamCollectionRemoved$ = apolloClient
+    // Remove the collection
-      .subscribe({
+    remove(coll.requests, (req) => req.id === requestID)
-        query: gql`
-          subscription TeamCollectionRemoved($teamID: ID!) {
-            teamCollectionRemoved(teamID: $teamID)
-          }
-        `,
-        variables: {
-          teamID: this.teamID,
-        },
-      })
-      .subscribe(({ data }) => {
-        this.removeCollection(data.teamCollectionRemoved)
-      })
 
-    this.teamRequestAdded$ = apolloClient
+    // Publish new tree
-      .subscribe({
+    this.collections$.next(tree)
-        query: gql`
+  }
-          subscription TeamRequestAdded($teamID: ID!) {
-            teamRequestAdded(teamID: $teamID) {
-              id
-              collectionID
-              request
-              title
-            }
-          }
-        `,
-        variables: {
-          teamID: this.teamID,
-        },
-      })
-      .subscribe(({ data }) => {
-        this.addRequest({
-          id: data.teamRequestAdded.id,
-          collectionID: data.teamRequestAdded.collectionID,
-          request: translateToNewRequest(
-            JSON.parse(data.teamRequestAdded.request)
-          ),
-          title: data.teamRequestAdded.title,
-        })
-      })
 
-    this.teamRequestUpdated$ = apolloClient
+  private registerSubscriptions() {
-      .subscribe({
+    if (!this.teamID) return
-        query: gql`
-          subscription TeamRequestUpdated($teamID: ID!) {
-            teamRequestUpdated(teamID: $teamID) {
-              id
-              collectionID
-              request
-              title
-            }
-          }
-        `,
-        variables: {
-          teamID: this.teamID,
-        },
-      })
-      .subscribe(({ data }) => {
-        this.updateRequest({
-          id: data.teamRequestUpdated.id,
-          collectionID: data.teamRequestUpdated.collectionID,
-          request: JSON.parse(data.teamRequestUpdated.request),
-          title: data.teamRequestUpdated.title,
-        })
-      })
 
-    this.teamRequestDeleted$ = apolloClient
+    this.teamCollectionAdded$ = runGQLSubscription({
-      .subscribe({
+      query: TeamCollectionAddedDocument,
-        query: gql`
+      variables: {
-          subscription TeamRequestDeleted($teamID: ID!) {
+        teamID: this.teamID,
-            teamRequestDeleted(teamID: $teamID)
+      },
-          }
+    }).subscribe((result) => {
-        `,
+      if (E.isLeft(result))
-        variables: {
+        throw new Error(`Team Collection Added Error: ${result.left}`)
-          teamID: this.teamID,
+
+      this.addCollection(
+        {
+          id: result.right.teamCollectionAdded.id,
+          children: null,
+          requests: null,
+          title: result.right.teamCollectionAdded.title,
         },
+        result.right.teamCollectionAdded.parent?.id ?? null
+      )
+    })
+
+    this.teamCollectionUpdated$ = runGQLSubscription({
+      query: TeamCollectionUpdatedDocument,
+      variables: {
+        teamID: this.teamID,
+      },
+    }).subscribe((result) => {
+      if (E.isLeft(result))
+        throw new Error(`Team Collection Updated Error: ${result.left}`)
+
+      this.updateCollection({
+        id: result.right.teamCollectionUpdated.id,
+        title: result.right.teamCollectionUpdated.title,
       })
-      .subscribe(({ data }) => {
+    })
-        this.removeRequest(data.teamRequestDeleted)
+
+    this.teamCollectionRemoved$ = runGQLSubscription({
+      query: TeamCollectionRemovedDocument,
+      variables: {
+        teamID: this.teamID,
+      },
+    }).subscribe((result) => {
+      if (E.isLeft(result))
+        throw new Error(`Team Collection Removed Error: ${result.left}`)
+
+      this.removeCollection(result.right.teamCollectionRemoved)
+    })
+
+    this.teamRequestAdded$ = runGQLSubscription({
+      query: TeamRequestAddedDocument,
+      variables: {
+        teamID: this.teamID,
+      },
+    }).subscribe((result) => {
+      if (E.isLeft(result))
+        throw new Error(`Team Request Added Error: ${result.left}`)
+
+      this.addRequest({
+        id: result.right.teamRequestAdded.id,
+        collectionID: result.right.teamRequestAdded.collectionID,
+        request: translateToNewRequest(
+          JSON.parse(result.right.teamRequestAdded.request)
+        ),
+        title: result.right.teamRequestAdded.title,
       })
+    })
+
+    this.teamRequestUpdated$ = runGQLSubscription({
+      query: TeamRequestUpdatedDocument,
+      variables: {
+        teamID: this.teamID,
+      },
+    }).subscribe((result) => {
+      if (E.isLeft(result))
+        throw new Error(`Team Request Updated Error: ${result.left}`)
+
+      this.updateRequest({
+        id: result.right.teamRequestUpdated.id,
+        collectionID: result.right.teamRequestUpdated.collectionID,
+        request: JSON.parse(result.right.teamRequestUpdated.request),
+        title: result.right.teamRequestUpdated.title,
+      })
+    })
+
+    this.teamRequestDeleted$ = runGQLSubscription({
+      query: TeamRequestDeletedDocument,
+      variables: {
+        teamID: this.teamID,
+      },
+    }).subscribe((result) => {
+      if (E.isLeft(result))
+        throw new Error(`Team Request Deleted Error ${result.left}`)
+
+      this.removeRequest(result.right.teamRequestDeleted)
+    })
   }
 
   /**
@@ -533,28 +501,54 @@ export default class TeamCollectionAdapter {
 
     if (collection.children != null) return
 
-    const collections: TeamCollection[] = (
+    // TODO: Implement deep pagination
-      await getCollectionChildren(apolloClient, collectionID)
+    const collectionData = await runGQLQuery({
-    ).map<TeamCollection>((el) => {
+      query: GetCollectionChildrenDocument,
-      return {
+      variables: {
-        id: el.id,
+        collectionID,
-        title: el.title,
+      },
-        children: null,
-        requests: null,
-      }
     })
 
-    const requests: TeamRequest[] = (
+    if (E.isLeft(collectionData))
-      await getCollectionRequests(apolloClient, collectionID)
+      throw new Error(
-    ).map<TeamRequest>((el) => {
+        `Child Collection Fetch Error for ${collectionID}: ${collectionData.left}`
-      return {
+      )
-        id: el.id,
+
+    const collections: TeamCollection[] =
+      collectionData.right.collection?.children.map(
+        (el) =>
+          <TeamCollection>{
+            id: el.id,
+            title: el.title,
+            children: null,
+            requests: null,
+          }
+      ) ?? []
+
+    // TODO: Implement deep pagination
+    const requestData = await runGQLQuery({
+      query: GetCollectionRequestsDocument,
+      variables: {
         collectionID,
-        title: el.title,
+        cursor: undefined,
-        request: translateToNewRequest(JSON.parse(el.request)),
+      },
-      }
     })
 
+    if (E.isLeft(requestData))
+      throw new Error(
+        `Child Request Fetch Error for ${requestData}: ${requestData.left}`
+      )
+
+    const requests: TeamRequest[] =
+      requestData.right.requestsInCollection.map<TeamRequest>((el) => {
+        return {
+          id: el.id,
+          collectionID,
+          title: el.title,
+          request: translateToNewRequest(JSON.parse(el.request)),
+        }
+      })
+
     collection.children = collections
     collection.requests = requests
 

packages/hoppscotch-app/helpers/teams/TeamMemberAdapter.ts

@@ -1,14 +1,19 @@
-import { BehaviorSubject } from "rxjs"
+import * as E from "fp-ts/Either"
-import gql from "graphql-tag"
+import { BehaviorSubject, Subscription } from "rxjs"
 import cloneDeep from "lodash/cloneDeep"
-import * as Apollo from "@apollo/client/core"
+import { runGQLQuery, runGQLSubscription } from "../backend/GQLClient"
-import { apolloClient } from "~/helpers/apollo"
+import {
+  GetTeamMembersDocument,
+  TeamMemberAddedDocument,
+  TeamMemberRemovedDocument,
+  TeamMemberUpdatedDocument,
+} from "../backend/graphql"
 
 export interface TeamsTeamMember {
   membershipID: string
   user: {
     uid: string
-    email: string
+    email: string | null
   }
   role: "OWNER" | "EDITOR" | "VIEWER"
 }
@@ -16,9 +21,9 @@ export interface TeamsTeamMember {
 export default class TeamMemberAdapter {
   members$: BehaviorSubject<TeamsTeamMember[]>
 
-  private teamMemberAdded$: ZenObservable.Subscription | null
+  private teamMemberAdded$: Subscription | null
-  private teamMemberRemoved$: ZenObservable.Subscription | null
+  private teamMemberRemoved$: Subscription | null
-  private teamMemberUpdated$: ZenObservable.Subscription | null
+  private teamMemberUpdated$: Subscription | null
 
   constructor(private teamID: string | null) {
     this.members$ = new BehaviorSubject<TeamsTeamMember[]>([])
@@ -50,37 +55,31 @@ export default class TeamMemberAdapter {
   }
 
   private async loadTeamMembers(): Promise<void> {
+    if (!this.teamID) return
+
     const result: TeamsTeamMember[] = []
 
     let cursor: string | null = null
+
     while (true) {
-      const response: Apollo.ApolloQueryResult<any> = await apolloClient.query({
+      const res = await runGQLQuery({
-        query: gql`
+        query: GetTeamMembersDocument,
-          query GetTeamMembers($teamID: ID!, $cursor: ID) {
-            team(teamID: $teamID) {
-              members(cursor: $cursor) {
-                membershipID
-                user {
-                  uid
-                  email
-                }
-                role
-              }
-            }
-          }
-        `,
         variables: {
           teamID: this.teamID,
           cursor,
         },
       })
 
-      result.push(...response.data.team.members)
+      if (E.isLeft(res))
+        throw new Error(`Team Members List Load failed: ${res.left}`)
 
-      if ((response.data.team.members as any[]).length === 0) break
+      // TODO: Improve this with TypeScript
+      result.push(...(res.right.team!.members as any))
+
+      if ((res.right.team!.members as any[]).length === 0) break
       else {
         cursor =
-          response.data.team.members[response.data.team.members.length - 1]
+          res.right.team!.members[res.right.team!.members.length - 1]
             .membershipID
       }
     }
@@ -89,72 +88,63 @@ export default class TeamMemberAdapter {
   }
 
   private registerSubscriptions() {
-    this.teamMemberAdded$ = apolloClient
+    if (!this.teamID) return
-      .subscribe({
-        query: gql`
-          subscription TeamMemberAdded($teamID: ID!) {
-            teamMemberAdded(teamID: $teamID) {
-              user {
-                uid
-                email
-              }
-              role
-            }
-          }
-        `,
-        variables: {
-          teamID: this.teamID,
-        },
-      })
-      .subscribe(({ data }) => {
-        this.members$.next([...this.members$.value, data.teamMemberAdded])
-      })
 
-    this.teamMemberRemoved$ = apolloClient
+    this.teamMemberAdded$ = runGQLSubscription({
-      .subscribe({
+      query: TeamMemberAddedDocument,
-        query: gql`
+      variables: {
-          subscription TeamMemberRemoved($teamID: ID!) {
+        teamID: this.teamID,
-            teamMemberRemoved(teamID: $teamID)
+      },
-          }
+    }).subscribe((result) => {
-        `,
+      if (E.isLeft(result))
-        variables: {
+        throw new Error(`Team Member Added Subscription Failed: ${result.left}`)
-          teamID: this.teamID,
-        },
-      })
-      .subscribe(({ data }) => {
-        this.members$.next(
-          this.members$.value.filter(
-            (el) => el.user.uid !== data.teamMemberRemoved
-          )
-        )
-      })
 
-    this.teamMemberUpdated$ = apolloClient
+      // TODO: Improve typing
-      .subscribe({
+      this.members$.next([
-        query: gql`
+        ...(this.members$.value as any),
-          subscription TeamMemberUpdated($teamID: ID!) {
+        result.right.teamMemberAdded as any,
-            teamMemberUpdated(teamID: $teamID) {
+      ])
-              user {
+    })
-                uid
+
-                email
+    this.teamMemberRemoved$ = runGQLSubscription({
-              }
+      query: TeamMemberRemovedDocument,
-              role
+      variables: {
-            }
+        teamID: this.teamID,
-          }
+      },
-        `,
+    }).subscribe((result) => {
-        variables: {
+      if (E.isLeft(result))
-          teamID: this.teamID,
+        throw new Error(
-        },
+          `Team Member Removed Subscription Failed: ${result.left}`
-      })
-      .subscribe(({ data }) => {
-        const list = cloneDeep(this.members$.value)
-        const obj = list.find(
-          (el) => el.user.uid === data.teamMemberUpdated.user.uid
         )
 
-        if (!obj) return
+      this.members$.next(
+        this.members$.value.filter(
+          (el) => el.user.uid !== result.right.teamMemberRemoved
+        )
+      )
+    })
 
-        Object.assign(obj, data.teamMemberUpdated)
+    this.teamMemberUpdated$ = runGQLSubscription({
-      })
+      query: TeamMemberUpdatedDocument,
+      variables: {
+        teamID: this.teamID,
+      },
+    }).subscribe((result) => {
+      if (E.isLeft(result))
+        throw new Error(
+          `Team Member Updated Subscription Failed: ${result.left}`
+        )
+
+      const list = cloneDeep(this.members$.value)
+      // TODO: Improve typing situation
+      const obj = list.find(
+        (el) =>
+          el.user.uid === (result.right.teamMemberUpdated.user!.uid as any)
+      )
+
+      if (!obj) return
+
+      Object.assign(obj, result.right.teamMemberUpdated)
+    })
   }
 }