Query Component

[MrSunshyne]

Wondering if a "generic" component would make sense to handle reactive variables exposed by vue-query, or is Suspense supposed to handle that?

I'm currently doing this, it handles errors and loading and a slot for custom rendering:

  <query-handler :query="projectQuery" v-slot="{ isFetching, data }">
    <project-summary v-if="data" :data="data" /> // custom render component in default slot
  </query-handler>

query-handler.vue

<template>
  <div>
    <transition mode="out-in" name="fade">
      <div v-if="query.isFetching">
        <LoadingComponent />
      </div>
      <div
        v-else-if="query.isError">An error has occurred: {{ query.error }}</div>
      <div v-else-if="query.isSuccess">
        <slot name="default" :data="query.data.data" :isFetching="query.isFetching">
          {{ query.data.data }}
        </slot>
      </div>
    </transition>
  </div>
</template>

<script lang="ts" setup>

let props = defineProps({
  query: {
    type: Object,
    default: () => ({
      isFetching: false,
      isError: false,
      isSuccess: false,
      error: null,
      data: [] as any,
    }),
  },
})

</script>

I'm wondering if there's a better way to do this, similar to Vue Use Components. Any guidance is much appreciated 🙏

[emilsgulbis]

I'm working on similar component and thinking if we could propose it to @vueuse/integrations

[DamianOsipiuk]

Hi @MrSunshyne
I believe that Suspense would be the way to go eventually.
But as of right now, suspense does not provide out-of-the-box error support.
Therefore a wrapper component to handle loading is a valid solution.

Thing that you might want to consider though is that you should show target component almost always.
You might want to hide it only during initial loading (query in fetching state and no data available).
Cause whenever you will mount the component again, you might already have some data in the cache to show to the user.
If you will show loading component instead of target component every time query loads, you are actually defeating the purpose of the library to show stale data and re-fetch in the background.