graphql.vue 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <template>
  2. <Splitpanes
  3. class="smart-splitter"
  4. :rtl="SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768"
  5. :class="{
  6. '!flex-row-reverse': SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768,
  7. }"
  8. :horizontal="!(windowInnerWidth.x.value >= 768)"
  9. >
  10. <Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
  11. <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
  12. <Pane
  13. :size="COLUMN_LAYOUT ? 45 : 50"
  14. class="hide-scrollbar !overflow-auto"
  15. >
  16. <GraphqlRequest :conn="gqlConn" />
  17. <GraphqlRequestOptions :conn="gqlConn" />
  18. </Pane>
  19. <Pane
  20. :size="COLUMN_LAYOUT ? 65 : 50"
  21. class="hide-scrollbar !overflow-auto"
  22. >
  23. <GraphqlResponse :conn="gqlConn" />
  24. </Pane>
  25. </Splitpanes>
  26. </Pane>
  27. <Pane
  28. v-if="SIDEBAR"
  29. size="25"
  30. min-size="20"
  31. class="hide-scrollbar !overflow-auto"
  32. >
  33. <GraphqlSidebar :conn="gqlConn" />
  34. </Pane>
  35. </Splitpanes>
  36. </template>
  37. <script lang="ts">
  38. import { defineComponent, watch } from "@nuxtjs/composition-api"
  39. import { Splitpanes, Pane } from "splitpanes"
  40. import "splitpanes/dist/splitpanes.css"
  41. import { useSetting } from "~/newstore/settings"
  42. import { GQLConnection } from "~/helpers/GQLConnection"
  43. import { useNuxt, useReadonlyStream } from "~/helpers/utils/composables"
  44. import useWindowSize from "~/helpers/utils/useWindowSize"
  45. export default defineComponent({
  46. components: { Splitpanes, Pane },
  47. beforeRouteLeave(_to, _from, next) {
  48. if (this.gqlConn.connected$.value) {
  49. this.gqlConn.disconnect()
  50. }
  51. next()
  52. },
  53. setup() {
  54. const nuxt = useNuxt()
  55. const gqlConn = new GQLConnection()
  56. const isLoading = useReadonlyStream(gqlConn.isLoading$, false)
  57. watch(isLoading, () => {
  58. if (isLoading) nuxt.value.$loading.start()
  59. else nuxt.value.$loading.finish()
  60. })
  61. return {
  62. windowInnerWidth: useWindowSize(),
  63. SIDEBAR: useSetting("SIDEBAR"),
  64. COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
  65. SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
  66. gqlConn,
  67. }
  68. },
  69. head() {
  70. return {
  71. title: `${this.$t("navigation.graphql")} • Hoppscotch`,
  72. }
  73. },
  74. })
  75. </script>