From d4cab63e04730f309dfd500a3193127d4ae9e3e1 Mon Sep 17 00:00:00 2001
From: xjccc <546534045@qq.com>
Date: Fri, 29 Nov 2024 16:19:55 +0800
Subject: [PATCH] update: docs

---
 docs/2.guide/4.recipes/3.custom-usefetch.md | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/docs/2.guide/4.recipes/3.custom-usefetch.md b/docs/2.guide/4.recipes/3.custom-usefetch.md
index 631b429578..ab6405ecec 100644
--- a/docs/2.guide/4.recipes/3.custom-usefetch.md
+++ b/docs/2.guide/4.recipes/3.custom-usefetch.md
@@ -69,10 +69,11 @@ Wrapping with [`useAsyncData`](/docs/api/composables/use-async-data) **avoid dou
 Now that `$api` has the logic we want, let's create a `useAPI` composable to replace the usage of `useAsyncData` + `$api`:
 
 ```ts [composables/useAPI.ts]
+import type { NitroFetchRequest } from 'nitropack'
 import type { UseFetchOptions } from 'nuxt/app'
 
 export function useAPI<T>(
-  url: string | (() => string),
+  url: NitroFetchRequest,
   options?: UseFetchOptions<T>,
 ) {
   return useFetch(url, {
@@ -90,18 +91,10 @@ const { data: modules } = await useAPI('/modules')
 </script>
 ```
 
-Let's use the new composable and have a nice and clean component:
-
-```vue [app.vue]
-<script setup>
-const { data: modules } = await useAPI('/modules')
-</script>
-```
-
 If you want to customize the type of any error returned, you can also do so:
 
 ```ts twoslash
-import type { FetchError } from 'ofetch'
+import type { NitroFetchRequest } from 'nitropack'
 import type { UseFetchOptions } from 'nuxt/app'
 
 interface CustomError {
@@ -110,10 +103,10 @@ interface CustomError {
 }
 
 export function useAPI<T>(
-  url: string | (() => string),
+  url: NitroFetchRequest,
   options?: UseFetchOptions<T>,
 ) {
-  return useFetch<T, FetchError<CustomError>>(url, {
+  return useFetch<T, CustomError>(url, {
     ...options,
     $fetch: useNuxtApp().$api
   })