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)

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

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

useFetch return values are undefined

Similar Threads

Similar Threads

Similar Threads