From 65be561a37bad4db7b8bd20a745912fa414782f8 Mon Sep 17 00:00:00 2001
From: Rohan Dhimal <drowhann@gmail.com>
Date: Wed, 14 Feb 2024 21:30:48 +0545
Subject: [PATCH] docs: remove pending property from data fetching composables

---
 docs/2.guide/1.concepts/1.auto-imports.md       |  2 +-
 docs/3.api/2.composables/use-async-data.md      |  6 ++----
 docs/3.api/2.composables/use-fetch.md           | 10 ++++------
 docs/3.api/2.composables/use-lazy-async-data.md |  4 ++--
 docs/3.api/2.composables/use-lazy-fetch.md      |  4 ++--
 docs/3.api/3.utils/clear-nuxt-data.md           |  2 +-
 docs/3.api/3.utils/refresh-nuxt-data.md         |  4 ++--
 7 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/docs/2.guide/1.concepts/1.auto-imports.md b/docs/2.guide/1.concepts/1.auto-imports.md
index 2ec9e7063f..31688f5d51 100644
--- a/docs/2.guide/1.concepts/1.auto-imports.md
+++ b/docs/2.guide/1.concepts/1.auto-imports.md
@@ -34,7 +34,7 @@ Nuxt auto-imports functions and composables to perform [data fetching](/docs/get
 ```vue
 <script setup lang="ts">
 /* useAsyncData() and $fetch() are auto-imported */
-const { data, refresh, pending } = await useFetch('/api/hello')
+const { data, refresh } = await useFetch('/api/hello')
 </script>
 ```
 
diff --git a/docs/3.api/2.composables/use-async-data.md b/docs/3.api/2.composables/use-async-data.md
index fadb2049c4..4ec2505dd6 100644
--- a/docs/3.api/2.composables/use-async-data.md
+++ b/docs/3.api/2.composables/use-async-data.md
@@ -18,7 +18,7 @@ Within your pages, components, and plugins you can use useAsyncData to get acces
 
 ```vue [pages/index.vue]
 <script setup lang="ts">
-const { data, pending, error, refresh } = await useAsyncData(
+const { data, error, refresh } = await useAsyncData(
   'mountains',
   () => $fetch('https://api.nuxtjs.dev/mountains')
 )
@@ -26,7 +26,7 @@ const { data, pending, error, refresh } = await useAsyncData(
 ```
 
 ::callout
-`data`, `pending`, `status` and `error` are Vue refs and they should be accessed with `.value` when used within the `<script setup>`, while `refresh`/`execute` is a plain function for refetching data.
+`data`, `status` and `error` are Vue refs and they should be accessed with `.value` when used within the `<script setup>`, while `refresh`/`execute` is a plain function for refetching data.
 ::
 
 ### Watch Params
@@ -88,7 +88,6 @@ Learn how to use `transform` and `getCachedData` to avoid superfluous calls to a
 ## Return Values
 
 - `data`: the result of the asynchronous function that is passed in.
-- `pending`: a boolean indicating whether the data is still being fetched.
 - `refresh`/`execute`: a function that can be used to refresh the data returned by the `handler` function.
 - `error`: an error object if the data fetching failed.
 - `status`: a string indicating the status of the data request (`"idle"`, `"pending"`, `"success"`, `"error"`).
@@ -127,7 +126,6 @@ type AsyncDataOptions<DataT> = {
 
 type AsyncData<DataT, ErrorT> = {
   data: Ref<DataT | null>
-  pending: Ref<boolean>
   refresh: (opts?: AsyncDataExecuteOptions) => Promise<void>
   execute: (opts?: AsyncDataExecuteOptions) => Promise<void>
   error: Ref<ErrorT | null>
diff --git a/docs/3.api/2.composables/use-fetch.md b/docs/3.api/2.composables/use-fetch.md
index 5b100b6ccc..fe640413c8 100644
--- a/docs/3.api/2.composables/use-fetch.md
+++ b/docs/3.api/2.composables/use-fetch.md
@@ -19,21 +19,21 @@ It automatically generates a key based on URL and fetch options, provides type h
 
 ```vue [pages/modules.vue]
 <script setup lang="ts">
-const { data, pending, error, refresh } = await useFetch('/api/modules', {
+const { data, error, refresh } = await useFetch('/api/modules', {
   pick: ['title']
 })
 </script>
 ```
 
 ::callout
-`data`, `pending`, `status` and `error` are Vue refs and they should be accessed with `.value` when used within the `<script setup>`, while `refresh`/`execute` is a plain function for refetching data.
+`data`, `status` and `error` are Vue refs and they should be accessed with `.value` when used within the `<script setup>`, while `refresh`/`execute` is a plain function for refetching data.
 ::
 
 Using the `query` option, you can add search parameters to your query. This option is extended from [unjs/ofetch](https://github.com/unjs/ofetch) and is using [unjs/ufo](https://github.com/unjs/ufo) to create the URL. Objects are automatically stringified.
 
 ```ts
 const param1 = ref('value1')
-const { data, pending, error, refresh } = await useFetch('/api/modules', {
+const { data, error, refresh } = await useFetch('/api/modules', {
   query: { param1, param2: 'value2' }
 })
 ```
@@ -43,7 +43,7 @@ The above example results in `https://api.nuxt.com/modules?param1=value1&param2=
 You can also use [interceptors](https://github.com/unjs/ofetch#%EF%B8%8F-interceptors):
 
 ```ts
-const { data, pending, error, refresh } = await useFetch('/api/auth/login', {
+const { data, error, refresh } = await useFetch('/api/auth/login', {
   onRequest({ request, options }) {
     // Set the request headers
     options.headers = options.headers || {}
@@ -114,7 +114,6 @@ Learn how to use `transform` and `getCachedData` to avoid superfluous calls to a
 ## Return Values
 
 - `data`: the result of the asynchronous function that is passed in.
-- `pending`: a boolean indicating whether the data is still being fetched.
 - `refresh`/`execute`: a function that can be used to refresh the data returned by the `handler` function.
 - `error`: an error object if the data fetching failed.
 - `status`: a string indicating the status of the data request (`"idle"`, `"pending"`, `"success"`, `"error"`).
@@ -155,7 +154,6 @@ type UseFetchOptions<DataT> = {
 
 type AsyncData<DataT, ErrorT> = {
   data: Ref<DataT | null>
-  pending: Ref<boolean>
   refresh: (opts?: AsyncDataExecuteOptions) => Promise<void>
   execute: (opts?: AsyncDataExecuteOptions) => Promise<void>
   error: Ref<ErrorT | null>
diff --git a/docs/3.api/2.composables/use-lazy-async-data.md b/docs/3.api/2.composables/use-lazy-async-data.md
index eab5bac636..ffaaef6ef6 100644
--- a/docs/3.api/2.composables/use-lazy-async-data.md
+++ b/docs/3.api/2.composables/use-lazy-async-data.md
@@ -25,7 +25,7 @@ By default, [`useAsyncData`](/docs/api/composables/use-async-data) blocks naviga
 /* Navigation will occur before fetching is complete.
   Handle pending and error states directly within your component's template
 */
-const { pending, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))
+const { status, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))
 
 watch(count, (newCount) => {
   // Because count might start out null, you won't have access
@@ -35,7 +35,7 @@ watch(count, (newCount) => {
 
 <template>
   <div>
-    {{ pending ? 'Loading' : count }}
+    {{ status === 'pending' ? 'Loading' : count }}
   </div>
 </template>
 ```
diff --git a/docs/3.api/2.composables/use-lazy-fetch.md b/docs/3.api/2.composables/use-lazy-fetch.md
index 3e5bd0a6e1..f2f7ffa707 100644
--- a/docs/3.api/2.composables/use-lazy-fetch.md
+++ b/docs/3.api/2.composables/use-lazy-fetch.md
@@ -25,7 +25,7 @@ By default, [`useFetch`](/docs/api/composables/use-fetch) blocks navigation unti
 /* Navigation will occur before fetching is complete.
   Handle pending and error states directly within your component's template
 */
-const { pending, data: posts } = await useLazyFetch('/api/posts')
+const { status, data: posts } = await useLazyFetch('/api/posts')
 watch(posts, (newPosts) => {
   // Because posts might start out null, you won't have access
   // to its contents immediately, but you can watch it.
@@ -33,7 +33,7 @@ watch(posts, (newPosts) => {
 </script>
 
 <template>
-  <div v-if="pending">
+  <div v-if="status === 'pending'">
     Loading ...
   </div>
   <div v-else>
diff --git a/docs/3.api/3.utils/clear-nuxt-data.md b/docs/3.api/3.utils/clear-nuxt-data.md
index b1b7f7cb9b..cc0a9ea230 100644
--- a/docs/3.api/3.utils/clear-nuxt-data.md
+++ b/docs/3.api/3.utils/clear-nuxt-data.md
@@ -1,6 +1,6 @@
 ---
 title: 'clearNuxtData'
-description: Delete cached data, error status and pending promises of useAsyncData and useFetch.
+description: Delete cached data and error status promises of useAsyncData and useFetch.
 links:
   - label: Source
     icon: i-simple-icons-github
diff --git a/docs/3.api/3.utils/refresh-nuxt-data.md b/docs/3.api/3.utils/refresh-nuxt-data.md
index c871ff57b7..32e1601a1d 100644
--- a/docs/3.api/3.utils/refresh-nuxt-data.md
+++ b/docs/3.api/3.utils/refresh-nuxt-data.md
@@ -58,13 +58,13 @@ This example below refreshes only data where the key matches to `count`.
 
 ```vue [pages/some-page.vue]
 <script setup lang="ts">
-const { pending, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))
+const { status, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))
 const refresh = () => refreshNuxtData('count')
 </script>
 
 <template>
   <div>
-    {{ pending ? 'Loading' : count }}
+    {{ status === 'pending' ? 'Loading' : count }}
   </div>
   <button @click="refresh">Refresh</button>
 </template>