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

401 Unauthorized

, and at times could return other errors, but

useLazyFetch

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

pending

to be false and then maybe an ErrorState or something? Or maybe just use the default Nuxt error?

Nuxt•3y ago•

2 replies

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>

<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

401 Unauthorized

, and at times could return other errors, but

useLazyFetch

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

pending

to be false and then maybe an ErrorState or something? Or maybe just use the default Nuxt error?

useLazyFetch errors not resolving

Similar Threads

useLazyFetch errors not resolving

Similar Threads

Similar Threads

Similar Threads