feat: initial setup of new backend comms

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

@@ -18,25 +18,29 @@
         @click.native="displayModalAdd(true)"
       />
       <div
-        v-if="myTeamsLoading"
+        v-if="myTeams.loading"
         class="flex flex-col items-center justify-center"
       >
         <SmartSpinner class="mb-4" />
         <span class="text-secondaryLight">{{ $t("state.loading") }}</span>
       </div>
       <div
-        v-if="!myTeamsLoading && myTeams.myTeams.length === 0"
+        v-if="
+          !myTeams.loading &&
+          E.isRight(myTeams.data) &&
+          myTeams.data.right.myTeams.length === 0
+        "
         class="flex items-center"
       >
         <i class="mr-4 material-icons">help_outline</i>
         {{ $t("empty.teams") }}
       </div>
       <div
-        v-else-if="!myTeamsLoading && !isApolloError(myTeams)"
+        v-else-if="!myTeams.loading && E.isRight(myTeams.data)"
         class="grid gap-4 sm:grid-cols-2 md:grid-cols-3"
       >
         <TeamsTeam
-          v-for="(team, index) in myTeams.myTeams"
+          v-for="(team, index) in myTeams.data.right.myTeams"
           :key="`team-${String(index)}`"
           :team-i-d="team.id"
           :team="team"
@@ -47,8 +51,12 @@
     <TeamsAdd :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
     <!-- ¯\_(ツ)_/¯ -->
     <TeamsEdit
-      v-if="!myTeamsLoading && myTeams.myTeams.length > 0"
-      :team="myTeams.myTeams[0]"
+      v-if="
+        !myTeams.loading &&
+        E.isRight(myTeams.data) &&
+        myTeams.data.right.myTeams.length > 0
+      "
+      :team="myTeams.data.right.myTeams[0]"
       :show="showModalEdit"
       :editing-team="editingTeam"
       :editingteam-i-d="editingTeamID"
@@ -59,16 +67,38 @@
 
 <script setup lang="ts">
 import { gql } from "@apollo/client/core"
-import { ref } from "@nuxtjs/composition-api"
-import { useGQLQuery, isApolloError } from "~/helpers/apollo"
+import { ref, watchEffect } from "@nuxtjs/composition-api"
+import * as E from "fp-ts/Either"
+import { useGQLQuery } from "~/helpers/backend/GQLClient"
+import { MyTeamsQueryError } from "~/helpers/backend/QueryErrors"
+import { TeamMemberRole } from "~/helpers/backend/types/TeamMemberRole"
 
 const showModalAdd = ref(false)
 const showModalEdit = ref(false)
 const editingTeam = ref<any>({}) // TODO: Check this out
 const editingTeamID = ref<any>("")
 
-const { loading: myTeamsLoading, data: myTeams } = useGQLQuery({
-  query: gql`
+const myTeams = useGQLQuery<
+  {
+    myTeams: Array<{
+      id: string
+      name: string
+      myRole: TeamMemberRole
+      ownersCount: number
+      members: Array<{
+        user: {
+          photoURL: string | null
+          displayName: string
+          email: string
+          uid: string
+        }
+        role: TeamMemberRole
+      }>
+    }>
+  },
+  MyTeamsQueryError
+>(
+  gql`
     query GetMyTeams {
       myTeams {
         id
@@ -86,8 +116,11 @@ const { loading: myTeamsLoading, data: myTeams } = useGQLQuery({
         }
       }
     }
-  `,
-  pollInterval: 10000,
+  `
+)
+
+watchEffect(() => {
+  console.log(myTeams)
 })
 
 const displayModalAdd = (shouldDisplay: boolean) => {