chore: update graphql with ts and setup

packages/hoppscotch-common/src/components/collections/graphql/Add.vue

@@ -32,46 +32,42 @@
   </HoppSmartModal>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from "vue"
+import { ref } from "vue"
 import { useToast } from "@composables/toast"
 import { useI18n } from "@composables/i18n"
 import { HoppGQLRequest, makeCollection } from "@hoppscotch/data"
 import { addGraphqlCollection } from "~/newstore/collections"
 import { platform } from "~/platform"
 
-export default defineComponent({
+const t = useI18n()
-  props: {
+const toast = useToast()
-    show: Boolean,
+
-  },
+defineProps<{
-  emits: ["hide-modal"],
+  show: boolean
-  setup() {
+}>()
-    return {
+
-      toast: useToast(),
+const emit = defineEmits<{
-      t: useI18n(),
+  (e: "hide-modal"): void
-    }
+}>()
-  },
+
-  data() {
+const name = ref<string | null>(null)
-    return {
+
-      name: null as string | null,
+const addNewCollection = () => {
-    }
+  if (!name.value) {
-  },
+    toast.error(`${t("collection.invalid_name")}`)
-  methods: {
-    addNewCollection() {
-      if (!this.name) {
-        this.toast.error(`${this.t("collection.invalid_name")}`)
     return
   }
 
   addGraphqlCollection(
     makeCollection<HoppGQLRequest>({
-          name: this.name,
+      name: name.value,
       folders: [],
       requests: [],
     })
   )
 
-      this.hideModal()
+  hideModal()
 
   platform.analytics?.logEvent({
     type: "HOPP_CREATE_COLLECTION",
@@ -79,11 +75,10 @@ export default defineComponent({
     platform: "gql",
     workspaceType: "personal",
   })
-    },
+}
-    hideModal() {
+
-      this.name = null
+const hideModal = () => {
-      this.$emit("hide-modal")
+  name.value = null
-    },
+  emit("hide-modal")
-  },
+}
-})
 </script>

packages/hoppscotch-common/src/components/collections/graphql/AddFolder.vue

@@ -3,7 +3,7 @@
     v-if="show"
     dialog
     :title="t('folder.new')"
-    @close="$emit('hide-modal')"
+    @close="hideModal"
   >
     <template #body>
       <HoppSmartInput
@@ -32,47 +32,49 @@
   </HoppSmartModal>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from "vue"
 import { useToast } from "@composables/toast"
 import { useI18n } from "@composables/i18n"
-import { defineComponent } from "vue"
 
-export default defineComponent({
+const t = useI18n()
-  props: {
+const toast = useToast()
-    show: Boolean,
+
-    folderPath: { type: String, default: null },
+const props = defineProps<{
-    collectionIndex: { type: Number, default: null },
+  show: boolean
-  },
+  folderPath?: string
-  emits: ["hide-modal", "add-folder"],
+  collectionIndex: number
-  setup() {
+}>()
-    return {
+
-      toast: useToast(),
+const emit = defineEmits<{
-      t: useI18n(),
+  (e: "hide-modal"): void
+  (
+    e: "add-folder",
+    v: {
+      name: string
+      path: string | undefined
     }
-  },
+  ): void
-  data() {
+}>()
-    return {
+
-      name: null,
+const name = ref<string | null>(null)
-    }
+
-  },
+const addFolder = () => {
-  methods: {
+  if (!name.value) {
-    addFolder() {
+    toast.error(`${t("folder.name_length_insufficient")}`)
-      if (!this.name) {
-        this.toast.error(`${this.t("folder.name_length_insufficient")}`)
     return
   }
 
-      this.$emit("add-folder", {
+  emit("add-folder", {
-        name: this.name,
+    name: name.value,
-        path: this.folderPath || `${this.collectionIndex}`,
+    path: props.folderPath || `${props.collectionIndex}`,
   })
 
-      this.hideModal()
+  hideModal()
-    },
+}
-    hideModal() {
+
-      this.name = null
+const hideModal = () => {
-      this.$emit("hide-modal")
+  name.value = null
-    },
+  emit("hide-modal")
-  },
+}
-})
 </script>

packages/hoppscotch-common/src/components/collections/graphql/Edit.vue

@@ -37,13 +37,14 @@ import { ref, watch } from "vue"
 import { editGraphqlCollection } from "~/newstore/collections"
 import { useToast } from "@composables/toast"
 import { useI18n } from "@composables/i18n"
+import { HoppCollection, HoppGQLRequest } from "@hoppscotch/data"
 
-const props = defineProps({
+const props = defineProps<{
-  show: Boolean,
+  show: boolean
-  editingCollection: { type: Object, default: () => ({}) },
+  editingCollectionIndex: number | null
-  editingCollectionIndex: { type: Number, default: null },
+  editingCollection: HoppCollection<HoppGQLRequest> | null
-  editingCollectionName: { type: String, default: null },
+  editingCollectionName: string
-})
+}>()
 
 const emit = defineEmits<{
   (e: "hide-modal"): void

packages/hoppscotch-common/src/components/collections/graphql/EditFolder.vue

@@ -32,52 +32,47 @@
   </HoppSmartModal>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from "vue"
+import { ref, watch } from "vue"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
 import { editGraphqlFolder } from "~/newstore/collections"
 
-export default defineComponent({
+const t = useI18n()
-  props: {
+const toast = useToast()
-    show: Boolean,
+
-    folder: { type: Object, default: () => ({}) },
+const props = defineProps<{
-    folderPath: { type: String, default: null },
+  show: boolean
-    editingFolderName: { type: String, default: null },
+  folderPath?: string
-  },
+  folder: any
-  emits: ["hide-modal"],
+  editingFolderName: string
-  setup() {
+}>()
-    return {
+
-      toast: useToast(),
+const emit = defineEmits(["hide-modal"])
-      t: useI18n(),
+
+const name = ref("")
+
+watch(
+  () => props.editingFolderName,
+  (val) => {
+    name.value = val
   }
-  },
+)
-  data() {
+
-    return {
+const editFolder = () => {
-      name: "",
+  if (!name.value) {
-    }
+    toast.error(`${t("collection.invalid_name")}`)
-  },
-  watch: {
-    editingFolderName(val) {
-      this.name = val
-    },
-  },
-  methods: {
-    editFolder() {
-      if (!this.name) {
-        this.toast.error(`${this.t("collection.invalid_name")}`)
     return
   }
-      editGraphqlFolder(this.folderPath, {
+  editGraphqlFolder(props.folderPath, {
-        ...(this.folder as any),
+    ...(props.folder as any),
-        name: this.name,
+    name: name.value,
-      })
-      this.hideModal()
-    },
-    hideModal() {
-      this.name = ""
-      this.$emit("hide-modal")
-    },
-  },
   })
+  hideModal()
+}
+
+const hideModal = () => {
+  name.value = ""
+  emit("hide-modal")
+}
 </script>

packages/hoppscotch-common/src/components/collections/graphql/EditRequest.vue

@@ -32,61 +32,55 @@
   </HoppSmartModal>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, PropType } from "vue"
+import { ref, watch } from "vue"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
 import { HoppGQLRequest } from "@hoppscotch/data"
 import { editGraphqlRequest } from "~/newstore/collections"
 
-export default defineComponent({
+const t = useI18n()
-  props: {
+const toast = useToast()
-    show: Boolean,
+
-    folderPath: { type: String, default: null },
+const props = defineProps<{
-    request: { type: Object as PropType<HoppGQLRequest>, default: () => ({}) },
+  show: boolean
-    requestIndex: { type: Number, default: null },
+  folderPath?: string
-    editingRequestName: { type: String, default: null },
+  requestIndex: number | null
-  },
+  request: HoppGQLRequest | null
-  emits: ["hide-modal"],
+  editingRequestName: string
-  setup() {
+}>()
-    return {
+
-      toast: useToast(),
+const emit = defineEmits<{
-      t: useI18n(),
+  (e: "hide-modal"): void
+}>()
+
+const requestUpdateData = ref({ name: null as string | null })
+
+watch(
+  () => props.editingRequestName,
+  (val) => {
+    requestUpdateData.value.name = val
   }
-  },
+)
-  data() {
+
-    return {
+const saveRequest = () => {
-      requestUpdateData: {
+  if (!requestUpdateData.value.name) {
-        name: null as any | null,
+    toast.error(`${t("collection.invalid_name")}`)
-      },
-    }
-  },
-  watch: {
-    editingRequestName(val) {
-      this.requestUpdateData.name = val
-    },
-  },
-  methods: {
-    saveRequest() {
-      if (!this.requestUpdateData.name) {
-        this.toast.error(`${this.t("collection.invalid_name")}`)
     return
   }
 
-      // TODO: Type safety goes brrrr. Proper typing plz
   const requestUpdated = {
-        ...this.$props.request,
+    ...(props.request as any),
-        name: this.$data.requestUpdateData.name || this.$props.request.name,
+    name: requestUpdateData.value.name || (props.request as any).name,
   }
 
-      editGraphqlRequest(this.folderPath, this.requestIndex, requestUpdated)
+  editGraphqlRequest(props.folderPath, props.requestIndex, requestUpdated)
 
-      this.hideModal()
+  hideModal()
-    },
+}
-    hideModal() {
+
-      this.requestUpdateData = { name: null }
+const hideModal = () => {
-      this.$emit("hide-modal")
+  requestUpdateData.value = { name: null }
-    },
+  emit("hide-modal")
-  },
+}
-})
 </script>

packages/hoppscotch-common/src/components/collections/graphql/Folder.vue

@@ -10,10 +10,11 @@
       @dragend="dragging = false"
       @contextmenu.prevent="options.tippy.show()"
     >
-      <span
+      <div
-        class="flex cursor-pointer items-center justify-center px-4"
+        class="flex min-w-0 flex-1 items-center justify-center cursor-pointer"
         @click="toggleShowChildren()"
       >
+        <span class="pointer-events-none flex items-center justify-center px-4">
           <component
             :is="collectionIcon"
             class="svg-icons"
@@ -21,13 +22,13 @@
           />
         </span>
         <span
-        class="flex min-w-0 flex-1 cursor-pointer py-2 pr-2 transition group-hover:text-secondaryDark"
+          class="pointer-events-none flex min-w-0 flex-1 cursor-pointer py-2 pr-2 transition group-hover:text-secondaryDark"
-        @click="toggleShowChildren()"
         >
           <span class="truncate" :class="{ 'text-accent': isSelected }">
             {{ folder.name ? folder.name : folder.title }}
           </span>
         </span>
+      </div>
       <div class="flex">
         <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"

packages/hoppscotch-common/src/components/collections/graphql/Request.vue

@@ -9,9 +9,12 @@
       @dragend="dragging = false"
       @contextmenu.prevent="options.tippy.show()"
     >
-      <span
+      <div
-        class="flex w-16 cursor-pointer items-center justify-center truncate px-2"
+        class="pointer-events-auto flex min-w-0 flex-1 cursor-pointer items-center justify-center"
         @click="selectRequest()"
+      >
+        <span
+          class="pointer-events-none flex w-8 items-center justify-center truncate px-6"
         >
           <component
             :is="isSelected ? IconCheckCircle : IconFile"
@@ -20,8 +23,7 @@
           />
         </span>
         <span
-        class="flex min-w-0 flex-1 cursor-pointer items-center py-2 pr-2 transition group-hover:text-secondaryDark"
+          class="pointer-events-none flex min-w-0 flex-1 items-center py-2 pr-2 transition group-hover:text-secondaryDark"
-        @click="selectRequest()"
         >
           <span class="truncate" :class="{ 'text-accent': isSelected }">
             {{ request.name }}
@@ -41,6 +43,7 @@
             ></span>
           </span>
         </span>
+      </div>
       <div class="flex">
         <span>
           <tippy

packages/hoppscotch-common/src/components/collections/graphql/index.vue

@@ -145,16 +145,14 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-// TODO: TypeScript + Script Setup this :)
+import { ref } from "vue"
-import { defineComponent } from "vue"
+import { clone, cloneDeep } from "lodash-es"
-import { cloneDeep, clone } from "lodash-es"
 import {
   graphqlCollections$,
   addGraphqlFolder,
   saveGraphqlRequestAs,
 } from "~/newstore/collections"
-
 import IconPlus from "~icons/lucide/plus"
 import IconHelpCircle from "~icons/lucide/help-circle"
 import IconImport from "~icons/lucide/folder-down"
@@ -164,81 +162,73 @@ import { useColorMode } from "@composables/theming"
 import { platform } from "~/platform"
 import { useService } from "dioc/vue"
 import { GQLTabService } from "~/services/tab/graphql"
+import { computed } from "vue"
+import { HoppCollection, HoppGQLRequest } from "@hoppscotch/data"
+import { Picked } from "~/helpers/types/HoppPicked"
 
-export default defineComponent({
+const t = useI18n()
-  props: {
+
+defineProps<{
   // Whether to activate the ability to pick items (activates 'select' events)
-    saveRequest: { type: Boolean, default: false },
+  saveRequest: boolean
-    picked: { type: Object, default: null },
+  picked: Picked
-  },
+}>()
-  emits: ["select", "use-collection"],
+
-  setup() {
 const collections = useReadonlyStream(graphqlCollections$, [], "deep")
 const colorMode = useColorMode()
-    const t = useI18n()
 const tabs = useService(GQLTabService)
 
-    return {
+const showModalAdd = ref(false)
-      collections,
+const showModalEdit = ref(false)
-      colorMode,
+const showModalImportExport = ref(false)
-      t,
+const showModalAddRequest = ref(false)
-      tabs,
+const showModalAddFolder = ref(false)
-      IconPlus,
+const showModalEditFolder = ref(false)
-      IconHelpCircle,
+const showModalEditRequest = ref(false)
-      IconImport,
-    }
-  },
-  data() {
-    return {
-      showModalAdd: false,
-      showModalEdit: false,
-      showModalImportExport: false,
-      showModalAddRequest: false,
-      showModalAddFolder: false,
-      showModalEditFolder: false,
-      showModalEditRequest: false,
-      editingCollection: undefined,
-      editingCollectionIndex: undefined,
-      editingFolder: undefined,
-      editingFolderName: undefined,
-      editingFolderIndex: undefined,
-      editingFolderPath: undefined,
-      editingRequest: undefined,
-      editingRequestIndex: undefined,
-      filterText: "",
-    }
-  },
-  computed: {
-    filteredCollections() {
-      const collections = clone(this.collections)
 
-      if (!this.filterText) return collections
+const editingCollection = ref<HoppCollection<HoppGQLRequest> | null>(null)
+const editingCollectionIndex = ref<number | null>(null)
+const editingFolder = ref<HoppCollection<HoppGQLRequest> | null>(null)
+const editingFolderName = ref("")
+const editingFolderIndex = ref<number | null>(null)
+const editingFolderPath = ref("")
+const editingRequest = ref<HoppGQLRequest | null>(null)
+const editingRequestIndex = ref<number | null>(null)
 
-      const filterText = this.filterText.toLowerCase()
+const filterText = ref("")
+
+const filteredCollections = computed(() => {
+  const collectionsClone = clone(collections.value)
+
+  if (!filterText.value) return collectionsClone
+
+  const filterTextLower = filterText.value.toLowerCase()
   const filteredCollections = []
 
-      for (const collection of collections) {
+  for (const collection of collectionsClone) {
     const filteredRequests = []
     const filteredFolders = []
+
     for (const request of collection.requests) {
-          if (request.name.toLowerCase().includes(filterText))
+      if (request.name.toLowerCase().includes(filterTextLower))
         filteredRequests.push(request)
     }
+
     for (const folder of collection.folders) {
       const filteredFolderRequests = []
       for (const request of folder.requests) {
-            if (request.name.toLowerCase().includes(filterText))
+        if (request.name.toLowerCase().includes(filterTextLower))
           filteredFolderRequests.push(request)
       }
       if (filteredFolderRequests.length > 0) {
-            const filteredFolder = Object.assign({}, folder)
+        const filteredFolder = { ...folder }
         filteredFolder.requests = filteredFolderRequests
         filteredFolders.push(filteredFolder)
       }
     }
 
     if (filteredRequests.length + filteredFolders.length > 0) {
-          const filteredCollection = Object.assign({}, collection)
+      const filteredCollection = { ...collection }
       filteredCollection.requests = filteredRequests
       filteredCollection.folders = filteredFolders
       filteredCollections.push(filteredCollection)
@@ -246,54 +236,73 @@ export default defineComponent({
   }
 
   return filteredCollections
-    },
+})
-  },
-  methods: {
-    displayModalAdd(shouldDisplay) {
-      this.showModalAdd = shouldDisplay
-    },
-    displayModalEdit(shouldDisplay) {
-      this.showModalEdit = shouldDisplay
 
-      if (!shouldDisplay) this.resetSelectedData()
+const displayModalAdd = (shouldDisplay: boolean) => {
-    },
+  showModalAdd.value = shouldDisplay
-    displayModalImportExport(shouldDisplay) {
+}
-      this.showModalImportExport = shouldDisplay
-    },
-    displayModalAddRequest(shouldDisplay) {
-      this.showModalAddRequest = shouldDisplay
 
-      if (!shouldDisplay) this.resetSelectedData()
+const displayModalEdit = (shouldDisplay: boolean) => {
-    },
+  showModalEdit.value = shouldDisplay
-    displayModalAddFolder(shouldDisplay) {
-      this.showModalAddFolder = shouldDisplay
 
-      if (!shouldDisplay) this.resetSelectedData()
+  if (!shouldDisplay) resetSelectedData()
-    },
+}
-    displayModalEditFolder(shouldDisplay) {
-      this.showModalEditFolder = shouldDisplay
 
-      if (!shouldDisplay) this.resetSelectedData()
+const displayModalImportExport = (shouldDisplay: boolean) => {
-    },
+  showModalImportExport.value = shouldDisplay
-    displayModalEditRequest(shouldDisplay) {
+}
-      this.showModalEditRequest = shouldDisplay
 
-      if (!shouldDisplay) this.resetSelectedData()
+const displayModalAddRequest = (shouldDisplay: boolean) => {
-    },
+  showModalAddRequest.value = shouldDisplay
-    editCollection(collection, collectionIndex) {
+
-      this.$data.editingCollection = collection
+  if (!shouldDisplay) resetSelectedData()
-      this.$data.editingCollectionIndex = collectionIndex
+}
-      this.displayModalEdit(true)
+
-    },
+const displayModalAddFolder = (shouldDisplay: boolean) => {
-    onAddRequest({ name, path, index }) {
+  showModalAddFolder.value = shouldDisplay
+
+  if (!shouldDisplay) resetSelectedData()
+}
+
+const displayModalEditFolder = (shouldDisplay: boolean) => {
+  showModalEditFolder.value = shouldDisplay
+
+  if (!shouldDisplay) resetSelectedData()
+}
+
+const displayModalEditRequest = (shouldDisplay: boolean) => {
+  showModalEditRequest.value = shouldDisplay
+
+  if (!shouldDisplay) resetSelectedData()
+}
+
+const editCollection = (
+  collection: HoppCollection<HoppGQLRequest>,
+  collectionIndex: number
+) => {
+  editingCollection.value = collection
+  editingCollectionIndex.value = collectionIndex
+  displayModalEdit(true)
+}
+
+const onAddRequest = ({
+  name,
+  path,
+  index,
+}: {
+  name: string
+  path: string
+  index: number
+}) => {
+  console.log("onAddRequest", name, path, index)
   const newRequest = {
-        ...this.tabs.currentActiveTab.value.document.request,
+    ...tabs.currentActiveTab.value.document.request,
     name,
   }
 
   saveGraphqlRequestAs(path, newRequest)
 
-      this.tabs.createNewTab({
+  tabs.createNewTab({
     saveContext: {
       originLocation: "user-collection",
       folderPath: path,
@@ -310,15 +319,23 @@ export default defineComponent({
     workspaceType: "personal",
   })
 
-      this.displayModalAddRequest(false)
+  displayModalAddRequest(false)
-    },
+}
-    addRequest(payload) {
+
+const addRequest = (payload: { path: string }) => {
   const { path } = payload
-      this.$data.editingFolderPath = path
+  editingFolderPath.value = path
-      this.displayModalAddRequest(true)
+  displayModalAddRequest(true)
-    },
+}
-    onAddFolder({ name, path }) {
+
-      addGraphqlFolder(name, path)
+const onAddFolder = ({
+  name,
+  path,
+}: {
+  name: string
+  path: string | undefined
+}) => {
+  addGraphqlFolder(name, path ?? "0")
 
   platform.analytics?.logEvent({
     type: "HOPP_CREATE_COLLECTION",
@@ -327,20 +344,33 @@ export default defineComponent({
     workspaceType: "personal",
   })
 
-      this.displayModalAddFolder(false)
+  displayModalAddFolder(false)
-    },
+}
-    addFolder(payload) {
+
+const addFolder = (payload: { path: string }) => {
   const { path } = payload
-      this.$data.editingFolderPath = path
+  editingFolderPath.value = path
-      this.displayModalAddFolder(true)
+  displayModalAddFolder(true)
-    },
+}
-    editFolder(payload) {
+
+const editFolder = (payload: {
+  folder: HoppCollection<HoppGQLRequest>
+  folderPath: string
+}) => {
   const { folder, folderPath } = payload
-      this.editingFolder = folder
+  editingFolder.value = folder
-      this.editingFolderPath = folderPath
+  editingFolderPath.value = folderPath
-      this.displayModalEditFolder(true)
+  displayModalEditFolder(true)
-    },
+}
-    editRequest(payload) {
+
+const editRequest = (payload: {
+  collectionIndex: number
+  folderIndex: number
+  folderName: string
+  request: HoppGQLRequest
+  requestIndex: number
+  folderPath: string
+}) => {
   const {
     collectionIndex,
     folderIndex,
@@ -349,28 +379,34 @@ export default defineComponent({
     requestIndex,
     folderPath,
   } = payload
-      this.$data.editingFolderPath = folderPath
+  editingFolderPath.value = folderPath
-      this.$data.editingCollectionIndex = collectionIndex
+  editingCollectionIndex.value = collectionIndex
-      this.$data.editingFolderIndex = folderIndex
+  editingFolderIndex.value = folderIndex
-      this.$data.editingFolderName = folderName
+  editingFolderName.value = folderName
-      this.$data.editingRequest = request
+  editingRequest.value = request
-      this.$data.editingRequestIndex = requestIndex
+  editingRequestIndex.value = requestIndex
-      this.displayModalEditRequest(true)
+  displayModalEditRequest(true)
-    },
+}
-    resetSelectedData() {
+
-      this.$data.editingCollection = undefined
+const duplicateRequest = ({
-      this.$data.editingCollectionIndex = undefined
+  folderPath,
-      this.$data.editingFolder = undefined
+  request,
-      this.$data.editingFolderIndex = undefined
+}: {
-      this.$data.editingRequest = undefined
+  folderPath: string
-      this.$data.editingRequestIndex = undefined
+  request: HoppGQLRequest
-    },
+}) => {
-    duplicateRequest({ folderPath, request }) {
   saveGraphqlRequestAs(folderPath, {
     ...cloneDeep(request),
-        name: `${request.name} - ${this.t("action.duplicate")}`,
+    name: `${request.name} - ${t("action.duplicate")}`,
-      })
-    },
-  },
   })
+}
+
+const resetSelectedData = () => {
+  editingCollection.value = null
+  editingCollectionIndex.value = null
+  editingFolder.value = null
+  editingFolderIndex.value = null
+  editingRequest.value = null
+  editingRequestIndex.value = null
+}
 </script>

packages/hoppscotch-common/src/components/graphql/Headers.vue

@@ -271,6 +271,7 @@ import { useCodemirror } from "@composables/codemirror"
 import { objRemoveKey } from "~/helpers/functional/object"
 import { useVModel } from "@vueuse/core"
 import { HoppGQLHeader } from "~/helpers/graphql"
+import { throwError } from "~/helpers/functional/error"
 
 const colorMode = useColorMode()
 const t = useI18n()
@@ -386,7 +387,6 @@ watch(workingHeaders, (newWorkingHeaders) => {
     )
   )
 
-  console.log("not-equal", workingHeaders.value)
   if (!isEqual(request.value.headers, fixedHeaders)) {
     request.value.headers = cloneDeep(fixedHeaders)
   }
@@ -479,7 +479,11 @@ const deleteHeader = (index: number) => {
     })
   }
 
-  workingHeaders.value.splice(index, 1)
+  workingHeaders.value = pipe(
+    workingHeaders.value,
+    A.deleteAt(index),
+    O.getOrElseW(() => throwError("Working Headers Deletion Out of Bounds"))
+  )
 }
 
 const clearContent = () => {
@@ -577,6 +581,4 @@ const mask = (header: any) => {
 //   if (tab === "auth") emit("change-tab", "authorization")
 //   else emit("change-tab", "bodyParams")
 // }
-
-console.log("compoyed-header", computedHeaders.value)
 </script>

packages/hoppscotch-common/src/components/graphql/RequestOptions.vue

@@ -99,18 +99,15 @@ const props = withDefaults(
     optionTab: "query",
   }
 )
-const emit = defineEmits(["update:modelValue", "update:response"])
+const emit = defineEmits<{
+  (e: "update:modelValue", value: HoppGQLRequest): void
+  (e: "update:optionTab", value: GQLOptionTabs): void
+  (e: "update:response", value: GQLResponseEvent[]): void
+}>()
+
 const selectedOptionTab = useVModel(props, "optionTab", emit)
 
-const request = ref(props.modelValue)
+const request = useVModel(props, "modelValue", emit)
-
-watch(
-  () => request.value,
-  (newVal) => {
-    emit("update:modelValue", newVal)
-  },
-  { deep: true }
-)
 
 const url = computedWithControl(
   () => tabs.currentActiveTab.value,