N
Nuxt•7mo ago
Rifat

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
Yaroslav•7mo 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
Rifat
RifatOP•7mo ago
Even if it has cached data the status should be pending or idle in the start instead of success for a split second

Did you find this page helpful?