N
Nuxt•4d ago
Phillip

Hard reload + useAsyncData = No data – Why?

Why is templatealways 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 })
2 Replies
kapa.ai
kapa.ai•4d ago
Hi @Phillip. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can explain why you might be experiencing this issue with useAsyncData on hard reload. The behavior you're describing is likely related to how useAsyncData handles data fetching and hydration in Nuxt. Here are a few key points to consider: 1. Default Values: According to the Nuxt 4 upgrade guide, data and error objects returned from useAsyncData now default to undefined instead of null. This change was made to bring greater consistency. 2. Client-side Hydration: As explained in the Data Fetching documentation, if you haven't fetched data on the server (for example, with server: false), then the data will not be fetched until hydration completes. This means even if you await useAsyncData on client-side, data will remain null within <script setup>. 3. 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 undefined or null until the data is fetched and hydrated. To address this issue, you could try the following: 1. Ensure that your data fetching is happening on both server and client sides. If it's client-only, use the server: false option. 2. Handle the pending state in your template. The Data Fetching documentation provides an example: 
<script setup lang="ts">
const { status, data: posts } = useFetch('/api/posts', {
  lazy: true
})
</script>
<template>
  <div v-if="status === 'pending'">
    Loading ...
  </div>
  <div v-else>
    <div v-for="post in posts">
      <!-- do something -->
    </div>
  </div>
</template>
<script setup lang="ts">
const { status, data: posts } = useFetch('/api/posts', {
  lazy: true
})
</script>
<template>
  <div v-if="status === 'pending'">
    Loading ...
  </div>
  <div v-else>
    <div v-for="post in posts">
      <!-- do something -->
    </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: 
const { data: template } = await useAsyncData(
  `campaignTemplateWithId${supabaseTemplateId}`,
  async () => {
    return await useCampaignTemplate().getTemplateById(supabaseTemplateId)
  },
  {
    default: () => ({
      // Provide a default structure matching your expected data
    })
  }
)
const { data: template } = await useAsyncData(
  `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 undefined 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
kapa.ai•4d ago
<@728986061098713110> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?