From 57b7cf5123e59b193a8a3b6583d13e13bae280a2 Mon Sep 17 00:00:00 2001 From: Michael Brevard Date: Mon, 24 Jun 2024 13:03:47 +0300 Subject: [PATCH] docs: warn about awaiting `useFetch`/`AsyncData` in wrappers (#27785) --- docs/2.guide/4.recipes/3.custom-usefetch.md | 6 +++++- docs/3.api/2.composables/use-async-data.md | 4 ++++ docs/3.api/2.composables/use-fetch.md | 4 ++++ 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/docs/2.guide/4.recipes/3.custom-usefetch.md b/docs/2.guide/4.recipes/3.custom-usefetch.md index e27af2712f..0aa0162db0 100644 --- a/docs/2.guide/4.recipes/3.custom-usefetch.md +++ b/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') ``` +::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. :: diff --git a/docs/3.api/2.composables/use-async-data.md b/docs/3.api/2.composables/use-async-data.md index b839fb1d08..24b35bb497 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, clear } = await useAsyncData( ``` +::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 ` ``` +::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 `