TanStackT
TanStack•2y ago•
2 replies
primary-violet

Nuxt suspense component & vueQuery suspense in SSR app

What i try to do is using suspense in my page to show a fallback e.g. loading indicator as long as my vueQueries are fetching.
For what i understand you await suspense() to make sure the data is fetched and available.

I tried a lot of combinations but i never ever see the fallback when i excecuting a vueQuery query, it just renders the #default template when it is done fetching the data.

Could that imply that my component is not async in the Suspense compontent context although i'm using script setup and await suspense() onMounted?

Minimal Concept setup:
page.vue
<template>
  <main class="main">
    <Suspense>
      <template #default>
        <HomePopularCategories />
      </template>
      <template #fallback>
        <div>
          <h1>WE ARE LOADING STUFF</h1>
        </div>
      </template>   
    </Suspense>
  </main>
</template>


HomePopularCategories.vue
<script setup lang="ts">
...

const fetcher = async () => await getPopularCategories<PagePopularCategory[]>()

const { data: popularCategories, data, isLoading, isFetching, isError, status, suspense } = useQuery<PagePopularCategory[]>({
  ...queryKeys.pageConfig.hpPopCategories(),
  queryFn: fetcher,
  suspense: true,
  enabled: process.client,
  retry: false
} as UseQueryOptions<PagePopularCategory[], Error>);


onMounted(async() => {
  await suspense()
})
</script>

<template>
  <LayoutsPageSection class="p-categories__container" v-if="popularCategories">
    <h1>WE ARE DONE LOADING STUFF</h1>
</LayoutsPageSection>   
</template>


I use await suspense() a lot to make sure the data is loaded on serverside without the verbose isLoading and isError conditionals
But i can not seem to get my head around this concept.
Was this page helpful?