Nuxt•11mo ago

Hard reload + useAsyncData = No data – Why?

Why is

template

template

template

templatealways

null

null

on hard reload but I do have a value when navigating between pages?

const { data: template } = await useAsyncData(`campaignTemplateWithId${supabaseTemplateId}`, async (): Promise<Tables<'campaign_template'>> => {
    return await useCampaignTemplate().getTemplateById(supabaseTemplateId)
}, { transform: async (t): Promise<ICampaignDetailsForm> => {
    console.log('This works, I have data here', t)
    return {
        name: t.name,
        primary_text: t.primary_text!,
        heading: t.heading!,
        description: t.description!,
        page_id: useUserStore().company!.active_facebook_page_id!.toString(),
        supabase_template_images: await useUtils().getSupabaseStorageFullPaths(t.images!, 'campaign_template'),
        type: t.type
    }
} })

watch(template, (newTemplate) => {
    console.log('This is logged once with value null', newTemplate)
}, { immediate: true, deep: true })

const { data: template } = await useAsyncData(`campaignTemplateWithId${supabaseTemplateId}`, async (): Promise<Tables<'campaign_template'>> => {
    return await useCampaignTemplate().getTemplateById(supabaseTemplateId)
}, { transform: async (t): Promise<ICampaignDetailsForm> => {
    console.log('This works, I have data here', t)
    return {
        name: t.name,
        primary_text: t.primary_text!,
        heading: t.heading!,
        description: t.description!,
        page_id: useUserStore().company!.active_facebook_page_id!.toString(),
        supabase_template_images: await useUtils().getSupabaseStorageFullPaths(t.images!, 'campaign_template'),
        type: t.type
    }
} })

watch(template, (newTemplate) => {
    console.log('This is logged once with value null', newTemplate)
}, { immediate: true, deep: true })

const { data: template } = await useAsyncData(`campaignTemplateWithId${supabaseTemplateId}`, async (): Promise<Tables<'campaign_template'>> => {
    return await useCampaignTemplate().getTemplateById(supabaseTemplateId)
}, { transform: async (t): Promise<ICampaignDetailsForm> => {
    console.log('This works, I have data here', t)
    return {
        name: t.name,
        primary_text: t.primary_text!,
        heading: t.heading!,
        description: t.description!,
        page_id: useUserStore().company!.active_facebook_page_id!.toString(),
        supabase_template_images: await useUtils().getSupabaseStorageFullPaths(t.images!, 'campaign_template'),
        type: t.type
    }
} })

watch(template, (newTemplate) => {
    console.log('This is logged once with value null', newTemplate)
}, { immediate: true, deep: true })

const { data: template } = await useAsyncData(`campaignTemplateWithId${supabaseTemplateId}`, async (): Promise<Tables<'campaign_template'>> => {
    return await useCampaignTemplate().getTemplateById(supabaseTemplateId)
}, { transform: async (t): Promise<ICampaignDetailsForm> => {
    console.log('This works, I have data here', t)
    return {
        name: t.name,
        primary_text: t.primary_text!,
        heading: t.heading!,
        description: t.description!,
        page_id: useUserStore().company!.active_facebook_page_id!.toString(),
        supabase_template_images: await useUtils().getSupabaseStorageFullPaths(t.images!, 'campaign_template'),
        type: t.type
    }
} })

watch(template, (newTemplate) => {
    console.log('This is logged once with value null', newTemplate)
}, { immediate: true, deep: true })

kapa.ai•1/27/25, 12:42 PM

Hi @Phillip. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

kapa.ai•1/27/25, 12:43 PM

----------------------
Based on the information provided in the knowledge sources, I can explain why you might be experiencing this issue with useAsyncDatauseAsyncData on hard reload.

The behavior you're describing is likely related to how useAsyncDatauseAsyncData handles data fetching and hydration in Nuxt. Here are a few key points to consider:

Default Values: According to the Nuxt 4 upgrade guide, datadata and errorerror objects returned from useAsyncDatauseAsyncData now default to undefinedundefined instead of
```
null
```
```
null
```
. This change was made to bring greater consistency.
Client-side Hydration: As explained in the Data Fetching documentation, if you haven't fetched data on the server (for example, with server: falseserver: false), then the data will not be fetched until hydration completes. This means even if you await useAsyncDatauseAsyncData on client-side, datadata will remain null within <script setup><script setup>.
Navigation vs. Hard Reload: When navigating between pages, the data is likely already in the Nuxt payload, which is why you see the value. On a hard reload, the initial state might be undefinedundefined or
```
null
```
```
null
```
until the data is fetched and hydrated.

To address this issue, you could try the following:

Ensure that your data fetching is happening on both server and client sides. If it's client-only, use the server: falseserver: false option.
Handle the pending state in your template. The Data Fetching documentation provides an example:

```vue
<script setup lang="ts">
const { status, data: posts } = useFetch('/api/posts', {
lazy: true
})
</script>

kapa.ai•1/27/25, 12:43 PM

<template>
<div v-if="status === 'pending'">
Loading ...
</div>
<div v-else>
<div v-for="post in posts">

</div>
</div>
</template>

3. If you need to perform actions immediately when the component is created, regardless of whether the data has been fetched, you might want to use the `default` option to provide an initial value:

3. If you need to perform actions immediately when the component is created, regardless of whether the data has been fetched, you might want to use the `default` option to provide an initial value:

javascript
const { data: template } = await useAsyncData(
campaignTemplateWithId${supabaseTemplateId}campaignTemplateWithId${supabaseTemplateId},
async () => {
return await useCampaignTemplate().getTemplateById(supabaseTemplateId)
},
{
default: () => ({
// Provide a default structure matching your expected data
})
}
)

``

By implementing these changes, you should be able to handle the initial

``

By implementing these changes, you should be able to handle the initial

undefined or or null` state more gracefully, both on hard reloads and during navigation.

Nuxt Data Fetching
Nuxt 4 Upgrade Guide
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

kapa.ai•1/27/25, 12:43 PM

@728986061098713110 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Hard reload + useAsyncData = No data – Why?

Similar Threads

Similar Threads

Similar Threads