refactor: monorepo+pnpm (removed husky)

packages/hoppscotch-app/pages/graphql.vue

@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <Splitpanes
+      class="smart-splitter"
+      :dbl-click-splitter="false"
+      :horizontal="!(windowInnerWidth.x.value >= 768)"
+    >
+      <Pane class="hide-scrollbar !overflow-auto">
+        <Splitpanes
+          class="smart-splitter"
+          :dbl-click-splitter="false"
+          horizontal
+        >
+          <Pane class="hide-scrollbar !overflow-auto">
+            <GraphqlRequest :conn="gqlConn" />
+            <GraphqlRequestOptions :conn="gqlConn" />
+          </Pane>
+          <Pane class="hide-scrollbar !overflow-auto">
+            <GraphqlResponse :conn="gqlConn" />
+          </Pane>
+        </Splitpanes>
+      </Pane>
+      <Pane
+        v-if="RIGHT_SIDEBAR"
+        max-size="35"
+        size="25"
+        min-size="20"
+        class="hide-scrollbar !overflow-auto"
+      >
+        <GraphqlSidebar :conn="gqlConn" />
+      </Pane>
+    </Splitpanes>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, watch } from "@nuxtjs/composition-api"
+import { Splitpanes, Pane } from "splitpanes"
+import "splitpanes/dist/splitpanes.css"
+import { useSetting } from "~/newstore/settings"
+import { GQLConnection } from "~/helpers/GQLConnection"
+import { useNuxt, useReadonlyStream } from "~/helpers/utils/composables"
+import useWindowSize from "~/helpers/utils/useWindowSize"
+
+export default defineComponent({
+  components: { Splitpanes, Pane },
+  beforeRouteLeave(_to, _from, next) {
+    if (this.gqlConn.connected$.value) {
+      this.gqlConn.disconnect()
+    }
+    next()
+  },
+  setup() {
+    const nuxt = useNuxt()
+
+    const gqlConn = new GQLConnection()
+
+    const isLoading = useReadonlyStream(gqlConn.isLoading$, false)
+
+    watch(isLoading, () => {
+      if (isLoading) nuxt.value.$loading.start()
+      else nuxt.value.$loading.finish()
+    })
+
+    return {
+      windowInnerWidth: useWindowSize(),
+      RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
+      gqlConn,
+    }
+  },
+  head() {
+    return {
+      title: `${this.$t("navigation.graphql")} • Hoppscotch`,
+    }
+  },
+})
+</script>