Co-authored-by: amk-dev <akash.k.mohan98@gmail.com> Co-authored-by: liyasthomas <liyascthomas@gmail.com>
44 lines
1.1 KiB
Vue
44 lines
1.1 KiB
Vue
<template>
|
|
<AppPaneLayout layout-id="graphql">
|
|
<template #primary>
|
|
<GraphqlRequest :conn="gqlConn" />
|
|
<GraphqlRequestOptions :conn="gqlConn" />
|
|
</template>
|
|
<template #secondary>
|
|
<GraphqlResponse :conn="gqlConn" />
|
|
</template>
|
|
<template #sidebar>
|
|
<GraphqlSidebar :conn="gqlConn" />
|
|
</template>
|
|
</AppPaneLayout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, onBeforeUnmount, watch } from "vue"
|
|
import { useReadonlyStream } from "@composables/stream"
|
|
import { useI18n } from "@composables/i18n"
|
|
import { usePageHead } from "@composables/head"
|
|
import { startPageProgress, completePageProgress } from "@modules/loadingbar"
|
|
import { GQLConnection } from "@helpers/GQLConnection"
|
|
|
|
const t = useI18n()
|
|
|
|
usePageHead({
|
|
title: computed(() => t("navigation.graphql")),
|
|
})
|
|
|
|
const gqlConn = new GQLConnection()
|
|
const isLoading = useReadonlyStream(gqlConn.isLoading$, false)
|
|
|
|
onBeforeUnmount(() => {
|
|
if (gqlConn.connected$.value) {
|
|
gqlConn.disconnect()
|
|
}
|
|
})
|
|
|
|
watch(isLoading, () => {
|
|
if (isLoading.value) startPageProgress()
|
|
else completePageProgress()
|
|
})
|
|
</script>
|