asyncData and $fetch not waiting for /server/api call to be finished

[Jesus82]

Environment

• Operating System: Darwin
• Node Version: v20.13.1
• Nuxt Version: 3.11.2
• CLI Version: 3.11.1
• Nitro Version: 2.9.6
• Package Manager: npm@10.5.2
• Builder: -
• User Config: components
• Runtime Modules: -
• Build Modules: -

Reproduction

Clone this repo and npm run dev or check this codesandbox

Go to index page and click link (video)

Describe the bug

I have an endpoint in the /server/api folder that sends this JSON as a response.

{
    "title": "A random title",
    "slug": "a-test-slug",
}

I have a TestCard component that receives an object as a prop:

<template>
  <p>{{ simplePost.title }}</p>
</template>

<script setup>
const props = defineProps({
  simplePost: {
    type: Object,
    required: true,
  },
})
</script>

In my /test page, I fetch this data with asyncData and fetch as recommended in the docs, and then I send that object as a prop:

  <template>
    <div>
      <nuxt-link :to="'/'">Index</nuxt-link>
      <TestCard :simple-post="simplePost" />
    </div>
  </template>
  
  <script setup>
  
  const { data: simplePost } = useAsyncData('simplePost', async () => {
    const post = await $fetch(`http://localhost:3000/api/simple-post`)
    return post
  })
  </script>

When trying to browse to /test via a nuxt-link, it seems that the page rendering doesn't wait for asyncData. Then when refreshing the /test page, it works correctly.

Additional context

No response

Logs

[Vue warn]: Invalid prop: type check failed for prop "simplePost". Expected Object, got Null

[manniL]

That's correct and expected. You can use await useAsyncData to ensure it will wait or handle the null case separately (which is preferred, e.g. via v-if)

[warflash]

Seems like you forgot awaiting the useAsyncData call: https://stackblitz.com/edit/github-q9fuc6?file=pages%2Ftest%2Findex.vue,pages%2Findex.vue

[Jesus82]

OMG, totally missed that (wasn't expecting to use await without an async)

@manniL if you could make that clarification stand out in the docs, I guess it would save lot of time for the next one that falls into this. Thanks for the quick reply!