Vue Render

<script lang="ts">
import { useQuery } from '@vue/apollo-composable';
import { defineComponent, h, onBeforeMount, computed } from 'vue';
import gql from 'graphql-tag';

export default defineComponent({
  name: 'Preview',
  setup(_, { slots }) {
    const { result, refetch } = useQuery<{
        getSettings: {
          channel?: "production" | "preview"
        }
      }>(
        gql` query getSettings ($scope: String!) { getSettings (scope: $scope) { channel } }`, 
        { scope: "system" }, 
        { fetchPolicy: 'cache-and-network' }
      );

    const channel = computed<"production" | "preview">(() => {
      return result.value?.getSettings?.channel ?? "production"
    });

    onBeforeMount(async() => {
      await refetch();
    });

    return () => [
      h( channel.value === "preview" ? slots.default as any : null )
    ]
  }
});
</script>