Nuxt•5mo ago

useFetch status is success for a split second before changing to pending

<template>
    <main>
        <p>Index page</p>
        <NuxtLink href="/about">Go About</NuxtLink>
        <!-- <p>{{ data }}</p> -->
    </main>
</template>

<script setup lang="ts">
    const { data, status, error } = await useLazyFetch('/api', {
        method: 'GET',
        responseType: 'text'
    })

    watchEffect(() => {
        console.log(status.value)
    })
</script>

<template>
    <main>
        <p>Index page</p>
        <NuxtLink href="/about">Go About</NuxtLink>
        <!-- <p>{{ data }}</p> -->
    </main>
</template>

<script setup lang="ts">
    const { data, status, error } = await useLazyFetch('/api', {
        method: 'GET',
        responseType: 'text'
    })

    watchEffect(() => {
        console.log(status.value)
    })
</script>

I have the above code in my index.vue page. I also have another about.vue page. When index page renders in the browser for the first time (client-side navigation) the status is: idle => pending => success which is okay. But when it renders for the second time the status is: success => pending => success Why the status is success at first? Shouldn't it be pending from the start? How to fix it? If I want to show a loading placeholder in that page, it will render contents at first then after a split second it will show placeholder which is a problem.

2 Replies

Yaroslav•5mo ago

Hey, i'm not sure, but as I understand useFetch and useLazyFetch caches responses somehow, and when you render page second time it refetches data

RifatOP•5mo ago

Even if it has cached data the status should be pending or idle in the start instead of success for a split second

Gaming

Programming

useFetch status is success for a split second before changing to pending