diff --git a/docs/2.guide/4.recipes/3.custom-usefetch.md b/docs/2.guide/4.recipes/3.custom-usefetch.md index 45d9651237..9b09997915 100644 --- a/docs/2.guide/4.recipes/3.custom-usefetch.md +++ b/docs/2.guide/4.recipes/3.custom-usefetch.md @@ -90,28 +90,6 @@ const { data: modules } = await useAPI('/modules') ``` -If you want to customize the type of any error returned, you can also do so: - -```ts -import type { FetchError } from 'ofetch' -import type { UseFetchOptions } from 'nuxt/app' - -interface CustomError { - message: string - statusCode: number -} - -export function useAPI( - url: string | (() => string), - options?: UseFetchOptions, -) { - return useFetch>(url, { - ...options, - $fetch: useNuxtApp().$api - }) -} -``` - ::note This example demonstrates how to use a custom `useFetch`, but the same structure is identical for a custom `useAsyncData`. :: diff --git a/packages/nuxt/src/app/composables/asyncData.ts b/packages/nuxt/src/app/composables/asyncData.ts index 29193a0616..27399fc96b 100644 --- a/packages/nuxt/src/app/composables/asyncData.ts +++ b/packages/nuxt/src/app/composables/asyncData.ts @@ -42,7 +42,7 @@ export interface AsyncDataOptions< ResT, DataT = ResT, PickKeys extends KeysOf = KeysOf, - DefaultT = undefined, + DefaultT = DataT | undefined, > { /** * Whether to fetch on the server side. @@ -131,7 +131,7 @@ export function useAsyncData< NuxtErrorDataT = unknown, DataT = ResT, PickKeys extends KeysOf = KeysOf, - DefaultT = undefined, + DefaultT = DataT | undefined, > ( handler: (ctx?: NuxtApp) => Promise, options?: AsyncDataOptions @@ -164,7 +164,7 @@ export function useAsyncData< NuxtErrorDataT = unknown, DataT = ResT, PickKeys extends KeysOf = KeysOf, - DefaultT = undefined, + DefaultT = DataT | undefined, > ( key: string, handler: (ctx?: NuxtApp) => Promise, @@ -193,7 +193,7 @@ export function useAsyncData< NuxtErrorDataT = unknown, DataT = ResT, PickKeys extends KeysOf = KeysOf, - DefaultT = undefined, + DefaultT = DataT | undefined, > (...args: any[]): AsyncData, (NuxtErrorDataT extends Error | NuxtError ? NuxtErrorDataT : NuxtError) | undefined> { const autoKey = typeof args[args.length - 1] === 'string' ? args.pop() : undefined if (typeof args[0] !== 'string') { args.unshift(autoKey) } @@ -405,7 +405,7 @@ export function useLazyAsyncData< DataE = Error, DataT = ResT, PickKeys extends KeysOf = KeysOf, - DefaultT = undefined, + DefaultT = DataT | undefined, > ( handler: (ctx?: NuxtApp) => Promise, options?: Omit, 'lazy'> @@ -425,7 +425,7 @@ export function useLazyAsyncData< DataE = Error, DataT = ResT, PickKeys extends KeysOf = KeysOf, - DefaultT = undefined, + DefaultT = DataT | undefined, > ( key: string, handler: (ctx?: NuxtApp) => Promise, @@ -448,7 +448,7 @@ export function useLazyAsyncData< DataE = Error, DataT = ResT, PickKeys extends KeysOf = KeysOf, - DefaultT = undefined, + DefaultT = DataT | undefined, > (...args: any[]): AsyncData | DefaultT, DataE | undefined> { const autoKey = typeof args[args.length - 1] === 'string' ? args.pop() : undefined if (typeof args[0] !== 'string') { args.unshift(autoKey) } diff --git a/packages/nuxt/src/app/composables/fetch.ts b/packages/nuxt/src/app/composables/fetch.ts index 5ce5a87d1f..3ffa4709b2 100644 --- a/packages/nuxt/src/app/composables/fetch.ts +++ b/packages/nuxt/src/app/composables/fetch.ts @@ -31,7 +31,7 @@ export interface UseFetchOptions< ResT, DataT = ResT, PickKeys extends KeysOf = KeysOf, - DefaultT = undefined, + DefaultT = DataT | undefined, R extends NitroFetchRequest = string & {}, M extends AvailableRouterMethod = AvailableRouterMethod, > extends Omit, 'watch'>, ComputedFetchOptions { @@ -55,7 +55,7 @@ export function useFetch< _ResT = ResT extends void ? FetchResult : ResT, DataT = _ResT, PickKeys extends KeysOf = KeysOf, - DefaultT = undefined, + DefaultT = DataT | undefined, > ( request: Ref | ReqT | (() => ReqT), opts?: UseFetchOptions<_ResT, DataT, PickKeys, DefaultT, ReqT, Method> @@ -87,7 +87,7 @@ export function useFetch< _ResT = ResT extends void ? FetchResult : ResT, DataT = _ResT, PickKeys extends KeysOf = KeysOf, - DefaultT = undefined, + DefaultT = DataT | undefined, > ( request: Ref | ReqT | (() => ReqT), arg1?: string | UseFetchOptions<_ResT, DataT, PickKeys, DefaultT, ReqT, Method>, @@ -193,7 +193,7 @@ export function useLazyFetch< _ResT = ResT extends void ? FetchResult : ResT, DataT = _ResT, PickKeys extends KeysOf = KeysOf, - DefaultT = undefined, + DefaultT = DataT | undefined, > ( request: Ref | ReqT | (() => ReqT), opts?: Omit, 'lazy'> @@ -219,7 +219,7 @@ export function useLazyFetch< _ResT = ResT extends void ? FetchResult : ResT, DataT = _ResT, PickKeys extends KeysOf = KeysOf, - DefaultT = undefined, + DefaultT = DataT | undefined, > ( request: Ref | ReqT | (() => ReqT), arg1?: string | Omit, 'lazy'>, diff --git a/playground/composables/test.ts b/playground/composables/test.ts new file mode 100644 index 0000000000..cf920f9f3c --- /dev/null +++ b/playground/composables/test.ts @@ -0,0 +1,14 @@ +interface ResT { + foo: string[] + bar: string[] +} + +const { data } = await useFetchCustom('/some/endpoint', { + default: () => ({ + foo: [], + bar: [], + }), +}) +if (data.value) { + const a = data.value +} diff --git a/playground/composables/useFetchCustom.ts b/playground/composables/useFetchCustom.ts new file mode 100644 index 0000000000..7add2deca0 --- /dev/null +++ b/playground/composables/useFetchCustom.ts @@ -0,0 +1,11 @@ +import type { UseFetchOptions } from 'nuxt/app' + +export function useFetchCustom ( + url: string | (() => string), + options?: UseFetchOptions, +) { + return useFetch(url, { + ...options, + $fetch: useNuxtApp().$customFetch as typeof $fetch, + }) +} diff --git a/playground/plugins/fetchCustom.ts b/playground/plugins/fetchCustom.ts new file mode 100644 index 0000000000..2e208c1a62 --- /dev/null +++ b/playground/plugins/fetchCustom.ts @@ -0,0 +1,11 @@ +export default defineNuxtPlugin(() => { + const fetchCustom = $fetch.create({ + baseURL: 'https://this-doesnt-matter.com', + }) + + return { + provide: { + fetchCustom, + }, + } +})