navigateTo inside useAsyncData

I have this request in my SPA component:

const { data: product } = await useAsyncData('product-id', async () => {
  try {
    const response = await getProductById(1)
    return response.data;
  } catch {
    return await navigateTo({ name: 'not-found' });
  }
});

const { data: product } = await useAsyncData('product-id', async () => {
  try {
    const response = await getProductById(1)
    return response.data;
  } catch {
    return await navigateTo({ name: 'not-found' });
  }
});

const { data: product } = await useAsyncData('product-id', async () => {
  try {
    const response = await getProductById(1)
    return response.data;
  } catch {
    return await navigateTo({ name: 'not-found' });
  }
});

const { data: product } = await useAsyncData('product-id', async () => {
  try {
    const response = await getProductById(1)
    return response.data;
  } catch {
    return await navigateTo({ name: 'not-found' });
  }
});

When I trigget tha navigateTo on the catch, the browser stills throws an error:

TypeError: Cannot read properties of undefined (reading 'type')

TypeError: Cannot read properties of undefined (reading 'type')

TypeError: Cannot read properties of undefined (reading 'type')

TypeError: Cannot read properties of undefined (reading 'type') which comes from this line

const productType = computed(() => product.value.type);

const productType = computed(() => product.value.type);

const productType = computed(() => product.value.type);

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.

navigateTo inside useAsyncData

Similar Threads

Similar Threads

Similar Threads