N
Nuxt•7mo ago
clownshark5503

useFetch return values are undefined

I have a call to my backend to retrieve data from a database. 
const headers = useRequestHeaders(['authorization'])
const { data, pending, status } = await useFetch('myEndPoint', { headers,lazy: true, server:false})

console.log("data", data)
console.log("pending: ", pending)
console.log("status: ", status)
const headers = useRequestHeaders(['authorization'])
const { data, pending, status } = await useFetch('myEndPoint', { headers,lazy: true, server:false})

console.log("data", data)
console.log("pending: ", pending)
console.log("status: ", status)
And the console is giving me this message for data, pending, and status: "Object { fn: get(), setter: set(value), _value: undefined, dep: {…}, __v_isRef: true, deps: undefined, depsTail: undefined, flags: 16, globalVersion: 38, next: undefined, … } myComponent.vue:60:13" I'm seeing that its claiming that the values are undefined. The network tab shows that my request to the backend went through and has the data as a response. Printing the value of these guys 
data.value
data.value
prints null so I still don't know where my data is. Has anyone seen this problem before? I am lost at this stage. I don't know whats flying over my head here. Update: Pending is True Solution: Change lazy to false
2 Replies
kapa.ai
kapa.ai•7mo ago
Hi @clownshark5503. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The behavior you're seeing is expected with Nuxt's useFetch composable. The values returned by useFetch—such as data, pending, and status—are Vue refs. When you log them directly, you'll see the ref object, not the actual value. To access the actual data, you need to use .value, for example: data.value, pending.value, and status.value. Here's how you should log the values: 
console.log("data", data.value)
console.log("pending: ", pending.value)
console.log("status: ", status.value)
console.log("data", data.value)
console.log("pending: ", pending.value)
console.log("status: ", status.value)
This is confirmed in the Nuxt documentation: "data, error and status are Vue refs accessible with .value in <script setup>" Docs > Getting-started > Data Fetching. Additionally, if you are using the lazy and server: false options, be aware that data will not be fetched until hydration completes on the client. This means that immediately after the await useFetch call, data.value may still be undefined until the fetch completes. You should handle the loading state accordingly, for example by watching status.value or pending.value Docs > Getting-started > Data Fetching. If you were previously checking for null, note that data and error now default to undefined, not null Default data and error values. In summary: - Always use .value to access the actual data from refs. - With lazy and server: false, data.value will be undefined until the fetch completes on the client. - Handle loading and error states using status.value or pending.value. If you follow these guidelines, you should see your data as expected. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•7mo ago
<@220663714020327434> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?