<script setup lang="ts">
// Fetch node by URI and handle query errors
const { path: uri } = useRoute();
const { data, error } = await useAsyncGraphQLQuery("NodeByUri", { uri });
if (!data.value?.nodeByUri) {
  console.error("NodeByUri query error:", error.value);
  throw createError({ statusCode: 404, message: `La page demandée est introuvable: ${uri}`, fatal: true });
}

// Dynamically resolve component based on node type
const componentName = `Node${data.value.nodeByUri.__typename}`;
if (!useNuxtApp().vueApp.component(componentName)) {
  throw createError({ statusCode: 404, message: `La page demandée ne peut pas être affichée correctement: ${componentName}`, fatal: true });
}

useNodeSeo(data.value.nodeByUri);
</script>

<template>
  <div v-if="data?.nodeByUri" id="page-node-from-uri">
    <Component :is="componentName" v-bind="data.nodeByUri" />
  </div>
</template>
