feat: graphql playground

Akryum · Jan 2, 2024 · 88a9848 · 88a9848
1 parent 3c5aee8
commit 88a9848
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 3 deletions.
diff --git a/packages/app/components/AppNav.vue b/packages/app/components/AppNav.vue
@@ -95,7 +95,7 @@ const colorMode = useColorMode()
 
     <AppNavItem
       v-if="hasGraphQL"
-      to="/graphql/schema"
+      to="/graphql"
       active-route="/graphql"
       icon="i-mdi-graphql"
       title="GraphQL"

diff --git a/packages/app/components/IframeKeepAlive.vue b/packages/app/components/IframeKeepAlive.vue
@@ -0,0 +1,73 @@
+<script lang="ts">
+const iframes = new Map<string, { iframe: HTMLIFrameElement, src: string }>()
+</script>
+
+<script lang="ts" setup>
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<{
+  id: string
+  src: string
+  class?: any
+  iframeClass?: any
+}>()
+
+const attrs = useAttrs()
+
+const wrapper = ref<HTMLDivElement>()
+
+const iframe = shallowRef<HTMLIFrameElement | undefined>()
+
+const bounds = useElementBounding(wrapper)
+
+watchEffect(() => {
+  if (iframe.value) {
+    iframe.value.style.top = `${bounds.top.value}px`
+    iframe.value.style.left = `${bounds.left.value}px`
+    iframe.value.style.width = `${bounds.width.value}px`
+    iframe.value.style.height = `${bounds.height.value}px`
+  }
+})
+
+onMounted(() => {
+  const saved = iframes.get(props.id)
+  iframe.value = saved?.iframe
+  if (!iframe.value) {
+    iframe.value = document.createElement('iframe')
+    iframe.value.style.position = 'fixed'
+    iframe.value.src = props.src
+    iframe.value.classList.add('w-full', 'h-full', 'border-0')
+
+    if (props.iframeClass) {
+      if (typeof props.iframeClass === 'string') {
+        iframe.value.classList.add(...props.iframeClass.split(/\s+/))
+      }
+      else {
+        iframe.value.classList.add(...props.iframeClass)
+      }
+    }
+
+    for (const [key, value] of Object.entries(attrs)) {
+      iframe.value.setAttribute(key, String(value))
+    }
+    iframes.set(props.id, { iframe: iframe.value, src: props.src })
+    document.body.appendChild(iframe.value)
+  }
+  else if (props.src !== saved?.src) {
+    iframe.value.src = props.src
+  }
+  iframe.value.style.display = 'block'
+})
+
+onBeforeUnmount(() => {
+  if (iframe.value) {
+    iframe.value.style.display = 'none'
+  }
+})
+</script>
+
+<template>
+  <div ref="wrapper" :class="props.class" />
+</template>
diff --git a/packages/app/pages/graphql.vue b/packages/app/pages/graphql.vue
@@ -1,3 +1,13 @@
+<script lang="ts" setup>
+useSaveRoute({
+  key: 'graphql.lastRoute',
+  basePath: '/graphql',
+  defaultRoute: {
+    name: 'graphql-schema',
+  },
+})
+</script>
+
 <template>
   <div class="flex divide-x divide-gray-300 dark:divide-gray-700">
     <Head>

diff --git a/packages/app/pages/graphql/playground.vue b/packages/app/pages/graphql/playground.vue
@@ -1,5 +1,25 @@
+<script setup lang="ts">
+const { data, refresh } = await useFetch('/api/server')
+onWindowFocus(refresh)
+
+const graphqlServer = computed(() => data.value?.routeInfos.find(item => item.type === 'graphql'))
+</script>
+
 <template>
-  <div class="flex">
-    <UIcon name="i-ph-traffic-cone" class="w-12 h-12 m-auto opacity-30" />
+  <div v-if="!graphqlServer" class="flex">
+    <UIcon name="i-ph-activity" class="w-8 h-8 m-auto text-gray-500" />
+  </div>
+
+  <div
+    v-else
+    class="flex"
+  >
+    <IframeKeepAlive
+      id="graphql-playground"
+      :src="graphqlServer.url"
+      frameborder="0"
+      class="flex-1 m-2 shadow-md"
+      iframe-class="rounded-lg overflow-hidden"
+    />
   </div>
 </template>
diff --git a/packages/app/utils/route.ts b/packages/app/utils/route.ts
@@ -13,7 +13,13 @@ let lastRoute: SavedRoute | null = null
 
 export interface UseSaveRouteOptions {
   key: string
+  /**
+   * Path used by the menu link to detect if we need to restore the saved route.
+   */
   basePath: string
+  /**
+   * Default route to use if the saved route is not found.
+   */
   defaultRoute?: {
     name: RouteRecordName
     params?: RouteParams