docs: warn about awaiting `useFetch`/`AsyncData` in wrappers (#27785)

docs/2.guide/4.recipes/3.custom-usefetch.md

@@ -70,7 +70,7 @@ const { data: modules } = await useAsyncData('modules', () => $api('/modules'))
 Wrapping with [`useAsyncData`](/docs/api/composables/use-async-data) **avoid double data fetching when doing server-side rendering** (server & client on hydration).
 ::
 
-## Custom `useFetch`
+## Custom `useFetch`/`useAsyncData`
 
 Now that `$api` has the logic we want, let's create a `useAPI` composable to replace the usage of `useAsyncData` + `$api`:
 
@@ -96,6 +96,10 @@ const { data: modules } = await useAPI('/modules')
 </script>
 ```
 
+::note
+This example demonstrates how to use a custom `useFetch`, but the same structure is identical for a custom `useAsyncData`.
+::
+
 ::callout{icon="i-simple-icons-youtube" color="red" to="https://www.youtube.com/watch?v=jXH8Tr-exhI"}
 Watch a video about custom `$fetch` and Repository Pattern in Nuxt.
 ::

docs/3.api/2.composables/use-async-data.md

@@ -25,6 +25,10 @@ const { data, pending, error, refresh, clear } = await useAsyncData(
 </script>
 ```
 
+::warning
+If you're using a custom useAsyncData wrapper, do not await it in the composable, as that can cause unexpected behavior. Please follow [this recipe](/docs/guide/recipes/custom-usefetch#custom-usefetch) for more information on how to make a custom async data fetcher.
+::
+
 ::note
 `data`, `pending`, `status` and `error` are Vue refs and they should be accessed with `.value` when used within the `<script setup>`, while `refresh`/`execute` and `clear` are plain functions.
 ::

docs/3.api/2.composables/use-fetch.md

@@ -25,6 +25,10 @@ const { data, pending, error, refresh, clear } = await useFetch('/api/modules',
 </script>
 ```
 
+::warning
+If you're using a custom useFetch wrapper, do not await it in the composable, as that can cause unexpected behavior. Please follow [this recipe](/docs/guide/recipes/custom-usefetch#custom-usefetch) for more information on how to make a custom async data fetcher.
+::
+
 ::note
 `data`, `pending`, `status` and `error` are Vue refs and they should be accessed with `.value` when used within the `<script setup>`, while `refresh`/`execute` and `clear` are plain functions..
 ::