Nuxt•2y ago

useLazyFetch errors not resolving

I am using the following code on my page (simplified) to fetch a list of items):

<template>
  <div>
    <LoadingState v-if="pending" /> <!-- shows a loading spinner -->
    <div v-else>
      <BlankSlate v-if="!items.length" /> <!-- shows "no items found" -->
      <div v-else>
        <!-- list items... -->
      </div>
    </div>
  </div>
</template>

<script setup>
const { pending, data: items } = useLazyFetch('/api/items');
</script>

<template>
  <div>
    <LoadingState v-if="pending" /> <!-- shows a loading spinner -->
    <div v-else>
      <BlankSlate v-if="!items.length" /> <!-- shows "no items found" -->
      <div v-else>
        <!-- list items... -->
      </div>
    </div>
  </div>
</template>

<script setup>
const { pending, data: items } = useLazyFetch('/api/items');
</script>

The problem is that currently, as intended, my API is returning a 401 Unauthorized, and at times could return other errors, but useLazyFetch doesn't catch the errors. It just sits there forever spinning with no hint of error unless you check the Network tab in dev tools. How do I make it return an error and maybe change? I'd want pending to be false and then maybe an ErrorState or something? Or maybe just use the default Nuxt error?

2 Replies

TonyOP•2y ago

Also, with the current code there, I am getting this error in console: Uncaught (in promise) TypeError: $setup.items is null

Unknown User•2y ago

Message Not Public

Gaming

Programming

useLazyFetch errors not resolving