refactor: interceptor error display in graphql response (#3553)

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

@@ -63,6 +63,7 @@ import {
   GQLResponseEvent,
   runGQLOperation,
   gqlMessageEvent,
+  connection,
 } from "~/helpers/graphql/connection"
 import { useService } from "dioc/vue"
 import { InterceptorService } from "~/services/interceptor.service"
@@ -152,13 +153,7 @@ const runQuery = async (
       toast.success(t("authorization.graphql_headers"))
     }
   } catch (e: any) {
-    console.log(e)
-    // response.value = [`${e}`]
     completePageProgress()
-    toast.error(
-      `${t("error.something_went_wrong")}. ${t("error.check_console_details")}`,
-      {}
-    )
     console.error(e)
   }
   platform.analytics?.logEvent({
@@ -177,7 +172,10 @@ watch(
     }
 
     try {
-      if (event?.operationType !== "subscription") {
+      if (
+        event?.type === "response" &&
+        event?.operationType !== "subscription"
+      ) {
         // response.value = [event]
         emit("update:response", [event])
       } else {
@@ -192,6 +190,26 @@ watch(
   { deep: true }
 )
 
+watch(
+  () => connection,
+  (newVal) => {
+    if (newVal.error && newVal.state === "DISCONNECTED") {
+      const response = [
+        {
+          type: "error",
+          error: {
+            message: newVal.error.message(t),
+            type: newVal.error.type,
+            component: newVal.error.component,
+          },
+        },
+      ]
+      emit("update:response", response)
+    }
+  },
+  { deep: true }
+)
+
 const hideRequestModal = () => {
   showSaveRequestModal.value = false
 }

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

@@ -1,6 +1,11 @@
 <template>
-  <div class="flex flex-1 flex-col overflow-auto whitespace-nowrap">
-    <div v-if="response?.length === 1" class="flex flex-1 flex-col">
+  <div class="flex flex-col flex-1 overflow-auto whitespace-nowrap">
+    <div
+      v-if="
+        response && response.length === 1 && response[0].type === 'response'
+      "
+      class="flex flex-col flex-1"
+    >
       <div
         class="sticky top-0 z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
       >
@@ -35,6 +40,13 @@
       </div>
       <div ref="schemaEditor" class="flex flex-1 flex-col"></div>
     </div>
+    <component
+      :is="response[0].error.component"
+      v-else-if="
+        response && response[0].type === 'error' && response[0].error.component
+      "
+      class="flex-1"
+    />
     <div
       v-else-if="response && response?.length > 1"
       class="flex flex-1 flex-col"
@@ -74,8 +86,16 @@ const props = withDefaults(
 )
 
 const responseString = computed(() => {
-  if (props.response?.length === 1) {
-    return JSON.stringify(JSON.parse(props.response[0].data), null, 2)
+  const response = props.response
+  if (response && response[0].type === "error") {
+    return ""
+  } else if (
+    response &&
+    response.length === 1 &&
+    response[0].type === "response" &&
+    response[0].data
+  ) {
+    return JSON.stringify(JSON.parse(response[0].data), null, 2)
   }
   return ""
 })

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

@@ -49,7 +49,11 @@
           v-for="(entry, index) in log"
           :key="`entry-${index}`"
           :is-open="log.length - 1 === index"
-          :entry="{ ts: entry.time, source: 'info', payload: entry.data }"
+          :entry="{
+            ts: entry.type === 'response' ? entry.time : undefined,
+            source: 'info',
+            payload: entry.type === 'response' ? entry.data : '',
+          }"
         />
       </div>
     </div>