navigateTo inside useAsyncData
I have this request in my SPA component:
When I trigget tha navigateTo on the catch, the browser stills throws an error:
TypeError: Cannot read properties of undefined (reading 'type') which comes from this line const productType = computed(() => product.value.type);
I am assuming that the page is being mounted before the navigateTo runs but I don't understand why because the error does not happen if the request is successfull.6 Replies
Hi @JuanMCe. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Your observation is correct: when you call navigateTo inside the catch block of useAsyncData, the navigation is triggered, but the component still mounts and tries to access product.value.type, which is undefined—hence the error.
This happens because useAsyncData expects you to return a value (or throw an error) from its handler. Returning the result of navigateTo does not stop the component from mounting; instead, it returns a Promise that resolves to a navigation result, not your expected data. As a result, product.value remains undefined, and your computed property fails when it tries to access type.
A better approach is to check for the absence of data after useAsyncData resolves, and then call navigateTo outside the handler. For example:
This way, you ensure that navigation only happens if the data is missing, and you avoid the error caused by accessing properties on undefined. This pattern is also described in a similar scenario, where navigation inside the data handler does not prevent the component from rendering, but checking the data after fetching and then navigating works as expected see this Stack Overflow answer and the related discussion.
Summary:
- Returning navigateTo from useAsyncData does not prevent the component from mounting. - Check for missing data after useAsyncData resolves, and then call navigateTo if needed. If you need to handle navigation on the server side (SSR), this approach will also result in a proper redirect (302) without rendering the page first. If you need more advanced error handling, consider using route middleware for authentication/authorization and navigation logic. --- If you need further clarification or examples, let me know! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
- Returning navigateTo from useAsyncData does not prevent the component from mounting. - Check for missing data after useAsyncData resolves, and then call navigateTo if needed. If you need to handle navigation on the server side (SSR), this approach will also result in a proper redirect (302) without rendering the page first. If you need more advanced error handling, consider using route middleware for authentication/authorization and navigation logic. --- If you need further clarification or examples, let me know! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@281911171919904778> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
I still get the same error before redirect:
TypeError: Cannot read properties of null (reading 'type')@JuanMCe
Inside your catch block try to:
const { data: product } = await useAsyncData('product-id', async () => {
try {
const response = await getProductById(1)
return response.data;
} catch {
useNuxtApp().runWithContext(() => {
return navigateTo(...)
})
}
});
still same error, I ended up using optional chaining in the parts that throws error
Nuxt
Experimental Features · Nuxt Advanced
Enable Nuxt experimental features to unlock new possibilities.