Nuxt•2mo ago

[useAsyncData] Component is already mounted, please use $fetch instead. See

async function handleComplete(e) {
    const data = await useAsyncData('sign-in', () => {
      const x = $fetch('/api/auth/sign-in', {
        method: 'POST',
        body: {
          pin: e.join(''),
        },
      });

      return x;
    });

    console.log(data);
  }

async function handleComplete(e) {
    const data = await useAsyncData('sign-in', () => {
      const x = $fetch('/api/auth/sign-in', {
        method: 'POST',
        body: {
          pin: e.join(''),
        },
      });

      return x;
    });

    console.log(data);
  }

Why do I have component already mounted? I want to use useAsyncData, to get the status to see if it is pending or success to render a loading state, how can I? I've use useAsyncData in my composables that I directly call in my setup, do I have to make my own loading and use $fetch directly since useAsyncData needs to be call in the setup? Thanks!

2 Replies

Cake•2mo ago

usually composables are meant to be used inside other composables or directly in scrip setup u can either use remove it outisde the handleComplete function, add { immediate: false } as a second argument to it, the u can call the execute command.

const { data,  execute } = await useAsyncData('key', () => { await ... } , {
  immediate: false
})

const { data,  execute } = await useAsyncData('key', () => { await ... } , {
  immediate: false
})

then u manually call execute or simply remove use $fetch directly like warning suggests

const isLoading = ref(false)
const handleComplete = async e => {
 isLoading.value = true
 const response = await $fetch(...)
 // do something with response
 isLoading.value = false
}

const isLoading = ref(false)
const handleComplete = async e => {
 isLoading.value = true
 const response = await $fetch(...)
 // do something with response
 isLoading.value = false
}

sirlav0ie•2mo ago

thanks @Cake

Gaming

Programming

[useAsyncData] Component is already mounted, please use $fetch instead. See