Nuxt•2y ago

useLazyFetch error Nuxt 3.4

Hey!

let {data:data, pending:pending, refresh:refresh, error:error} = await useLazyFetch(url, {headers:headers})
console.log("ERROR API", error)

let {data:data, pending:pending, refresh:refresh, error:error} = await useLazyFetch(url, {headers:headers})
console.log("ERROR API", error)

I get the following console log when a GET request is made (with the code above), however the error object returned by the lazyFetch is not useful (see image): This was working fine when I was on rc14 My headers and URL is correct to the best of my knowledge When I change from useLazyFetch to useFetch it works. But I don't want to block navigation till after the API calls. Any ideas?

13 Replies

warflash•2y ago

Well you'd want to log error.value atleast as the error object is a ref So something like this: https://stackblitz.com/edit/github-x56zdm-rsfkvq?file=pages%2Ftest.vue

Flinty•2y ago

error.value is undefined Hence the confusion

warflash•2y ago

check my example

Flinty•2y ago

It doesn't work either?

Flinty•2y ago

Changing the code to

let {
  data: data,
  pending: pending,
  refresh: refresh,
  error: error,
} = await useLazyFetch('https://dummyjson.com/products/1');
console.log('code:', error.value);
console.log('message:', error.value);

let {
  data: data,
  pending: pending,
  refresh: refresh,
  error: error,
} = await useLazyFetch('https://dummyjson.com/products/1');
console.log('code:', error.value);
console.log('message:', error.value);

yields:

code: undefined
message: undefined

code: undefined
message: undefined

Sorry being a dumbass there, incorrect url presents valid error

warflash•2y ago

yep

Flinty•2y ago

So why does let {data:data, pending:pending, refresh:refresh, error:error} = await useLazyFetch(url, {headers:headers}) present an error, when let {data:data, pending:pending, refresh:refresh, error:error} = await useFetch(url, {headers:headers}) works just fine? Ah I get it got* !== should've been != 😩 I do have another issue tho if you're not busy

Flinty•2y ago

I have a list of player profiles as shown in the image. When I load this page for the first time, and click the "View Profile" button for a profile, the data is not fetched from the API, as in I get a null from the data attribute. When I go back to the shown profiles page, and click the same View Profile (same profile), it loads just fine, and the data is returned

warflash•2y ago

So since youre explicitly calling useFetchLazy which is not render blocking there will be a time window while data will be null which you have to handle on the second request it works due to caching atleast thats my guess

Flinty•2y ago

So on my page I have

<page-loading v-if="pending && player!=null"/>
<div class="grid grid-cols-1 lg:grid-cols-4 gap-0 min-h-full pt-2 lg:pt-0 lg:relative" v-else>
....my actual content

<page-loading v-if="pending && player!=null"/>
<div class="grid grid-cols-1 lg:grid-cols-4 gap-0 min-h-full pt-2 lg:pt-0 lg:relative" v-else>
....my actual content

is that not enough? changing the v-else to v-else-if="player" worked Got that's stupid Thanks dude

warflash•2y ago

Just out of curiousity, have you tried v-if="pending" .. v-else..?

Flinty•2y ago

Yeah I removed the && player part and it had the same issue

warflash•2y ago

That's strange if you can reproduce it on stackblitz might be worth raising an issue

Gaming

Programming

useLazyFetch error Nuxt 3.4