NuxtN
Nuxt•3y ago
Tony

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>

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?
image.png
Was this page helpful?