From 5d2ac285763ee9125baaf840e6cba92b647fe390 Mon Sep 17 00:00:00 2001
From: Victor Akintunde <32616421+akintoluvic@users.noreply.github.com>
Date: Mon, 18 Dec 2023 19:37:51 +0100
Subject: [PATCH] docs: update return for `useFetch` and `useAsyncData` #24407
 (#24775)

---
 docs/1.getting-started/6.data-fetching.md  | 20 ++++++++++++++++++++
 docs/3.api/2.composables/use-async-data.md |  4 ++++
 docs/3.api/2.composables/use-fetch.md      |  4 ++++
 3 files changed, 28 insertions(+)

diff --git a/docs/1.getting-started/6.data-fetching.md b/docs/1.getting-started/6.data-fetching.md
index d283ecc2db..47cb56f529 100644
--- a/docs/1.getting-started/6.data-fetching.md
+++ b/docs/1.getting-started/6.data-fetching.md
@@ -143,6 +143,26 @@ const { data: discounts, pending } = await useAsyncData('cart-discount', async (
 Read more about `useAsyncData`.
 ::
 
+## Return Values
+
+`useFetch` and `useAsyncData` have the same return values listed below.
+
+- `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"`).
+
+::callout
+`data`, `pending`, `error` and `status` are Vue refs accessible with `.value` in `<script setup>`
+::
+
+By default, Nuxt waits until a `refresh` is finished before it can be executed again.
+
+::callout
+If you have not fetched data on the server (for example, with `server: false`), then the data _will not_ be fetched until hydration completes. This means even if you await `useFetch` on client-side, `data` will remain null within `<script setup>`.
+::
+
 ## Options
 
 [`useAsyncData`](/docs/api/composables/use-async-data) and [`useFetch`](/docs/api/composables/use-fetch) return the same object type and accept a common set of options as their last argument. They can help you control the composables behavior, such as navigation blocking, caching or execution.
diff --git a/docs/3.api/2.composables/use-async-data.md b/docs/3.api/2.composables/use-async-data.md
index ba37c117ea..f0fa43ba70 100644
--- a/docs/3.api/2.composables/use-async-data.md
+++ b/docs/3.api/2.composables/use-async-data.md
@@ -25,6 +25,10 @@ const { data, pending, error, refresh } = await useAsyncData(
 </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.
+::
+
 ### Watch Params
 
 The built-in `watch` option allows automatically rerunning the fetcher function when any changes are detected.
diff --git a/docs/3.api/2.composables/use-fetch.md b/docs/3.api/2.composables/use-fetch.md
index 057750ccf0..2fb3593978 100644
--- a/docs/3.api/2.composables/use-fetch.md
+++ b/docs/3.api/2.composables/use-fetch.md
@@ -27,6 +27,10 @@ const { data, pending, error, refresh } = await useFetch(`https://api.nuxtjs.dev
 </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.
+::
+
 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