hereconnect/apps/frontend/src/components/QueryRender.vue

<script setup lang="ts" generic="R, E">
import type { UseQueryReturnType } from '@tanstack/vue-query'

type Props = {
  query: UseQueryReturnType<R, E>
}

const { query } = defineProps<Props>()

const { data, error, refetch, isSuccess, isError, isLoading } = query
</script>

<template>
  <slot v-if="isSuccess" name="default" :data="data! as R" />
  <slot v-else-if="isLoading" name="loading"><p class="text-gray-500">Загрузка данных...</p></slot>
  <slot v-else-if="isError" name="error" :error="error as E" :reload="refetch">
    Ошибка загрузки данных:
    {{ error && typeof error === 'object' && 'message' in error ? error.message : error }}
  </slot>
</template>