How to use pending and status in useFetch in Nuxt 3? – Nuxt.js

The Problem:

The developer is encountering difficulties in utilizing the ‘pending’ and ‘status’ properties provided by the ‘useFetch’ composable in Nuxt 3. Their goal is to disable a button and display a spinner while a POST request is being processed. However, confusion arises when employing these properties as neither ‘pending’ nor ‘status’ seem to yield the desired behavior. When using ‘pending,’ the button and spinner activate prematurely, even before the request initiates. On the other hand, using ‘status’ fails to trigger the button deactivation and spinner appearance during the request’s execution. This discrepancy leads to uncertainty about the appropriate usage of ‘pending’ and ‘status,’ as well as the rationale behind having both properties with seemingly similar functionality.

The Solutions:

Solution 1: Pending and status feature in useFetch

The pending and status features in useFetch are used to disable a button and show a spinner when a POST request is pending.

• pending: pending returns a Boolean value that indicates whether the request is currently pending. However, there is an issue when using pending and immediate: false together, which causes the button to be disabled and the spinner to show by default even before the request has been made.

• status: status can accept one of the following values:

  • pending: The request is currently pending.
  • resolved: The request was successful.
  • rejected: The request failed.

status is more reliable than pending when used with immediate: false, because it only returns pending when the request is actually being executed.

Upgrading Nuxt 3 to the latest version is recommended as it may include the status feature.

Solution 2: Utilize Lazy Fetch and Server-Side Logic

To properly utilize pending and status while leveraging useFetch, follow these steps:

1. Employ useLazyFetch Instead of useFetch:

• useFetch works with server-side data fetching, which is not ideal for this case.
• Instead, opt for useLazyFetch, which enables client-side data fetching.

2. Disable Server-Side Fetching:

• Set the server option to false in your useLazyFetch configuration.
• This ensures that data is fetched on the client side, allowing you to control when the fetch occurs.

Example: Utilize useLazyFetch with server set to false to fetch data from a Cat Fact API:

<!– begin snippet: js hide: false console: true babel: false –>
const { data, pending, execute, status } = await useLazyFetch(‘https://catfact.ninja/fact’, {
server: false,
});
<!– end snippet –>

Now, you can use pending and status to disable buttons and display spinners accordingly, ensuring that the UI responds as expected during the data fetching process.

Video Explanation: