Nuxt•6mo ago

useFetch data is correctly filled but data.value is null?!

Ok, so I have a custom useFetch composable who works perfectly. I have a useFetch call who correctly display the data in the console:

// First screenshot
const {data} = await useApiFetch({name: 'map.load'})
console.log({rep: data})

// First screenshot
const {data} = await useApiFetch({name: 'map.load'})
console.log({rep: data})

But if I try to access the .value to get any existing property, it returns me null!

// Second screenshot
const {data} = await useApiFetch({name: 'map.load'})
console.log({rep: data.value})

// Second screenshot
const {data} = await useApiFetch({name: 'map.load'})
console.log({rep: data.value})

Isn't that weird? I use the same composable in all my app and it's working fine. How can a ref contains the data but returns null when accessing its value?

3 Replies

Romain 'Maz' B.OP•6mo ago

I've found this reddit thread which exposes the same problem but not the solution 😢 https://www.reddit.com/r/vuejs/comments/10601h3/i_can_get_a_ref_object_but_using_value_returns/

Romain 'Maz' B.OP•6mo ago

Hmm, it sounds like its due to the fact that the logging happen while the request is still pending. Not sure why though, the await should lock the current scope execution...

manniL•6mo ago

well, depends on what the composable does

Gaming

Programming

useFetch data is correctly filled but data.value is null?!