Generic response type not working with `useFetch`

Versions

• nuxt: 3.0.0-rc.12 & 3.0.0-rc.13
• node: v16.11.0

Reproduction

https://stackblitz.com/edit/github-itsfns?file=app.vue

Works fine (asyncData is a _AsyncData<{ title: string }, true | FetchError<any> | null>:

const customApi = async () => {
	const asyncData = await useFetch<{ title: string }>('https://api.nuxtjs.dev/mountains', {
		pick: ['title'],
		method: 'GET',
	});
	return asyncData;
};
const result  = await customApi();
console.log(result.data.value?.title);

Not working (asyncData is a _AsyncData<PickFrom<_ResT, KeyOfRes<Transform>>, true | FetchError<any> | null>):

const customApi = async <T>() => {
	const asyncData = await useFetch<T>('https://api.nuxtjs.dev/mountains', {
		pick: ['title'],
		method: 'GET',
	});
	return asyncData;
};
const result  = await customApi<{ title: string }>();
console.log(result.data.value?.title);

Additionally, setting the `pick1 field causes an error.

Additional Details

I would like to add that everything worked very well before. Unfortunately, now even undoing the Nuxt version doesn't help.

Steps to reproduce

Copy and paste code above.

What is Expected?

I want to create a custom useFetch and be able to type a response (link1, link2)

What is actually happening?

I am getting a weird type causing my application to fail.

[danielroe]

In that case, you can copy the types from useFetch with their inference. It’s a complex type but it needs to be for the inference:

https://github.com/nuxt/framework/blob/bdacfa6ffe65d8887e4830fa0d4c8ef2f424698c/packages/nuxt/src/app/composables/fetch.ts#L23-L33

The other alternative is to simply override them, e.g.:

const customApi = async <T>(request: NitroFetchRequest, options: UseFetchOptions<T extends void ? unknown : T, (res: T extends void ? unknown : T) => T extends void ? unknown : T, KeyOfRes<(res: T extends void ? unknown : T) => T extends void ? unknown : T>>) => {
	const statusCode = ref<number>(200);
	const asyncData = await useFetch(request, {
		initialCache: false,
		baseURL: <url>,
		headers: { ...headers, authorization: localStorage['auth-token'] }, // current localStorage
		onResponseError: async (ctx) => {
			statusCode.value = ctx.response.status;
			await onResponseError(ctx);
		},
		onRequest,
		parseResponse,
		...options,
	}) as AsyncData<T, FetchError | null>;
	return { ...asyncData, statusCode };
};

[szulcus]

Yes, I know. I mean a ready type with missing fields returned by useFetch (status, statusCode, statusMessage, statusText). These fields are not dependent on me. I hope this can be completed in the future. Temporarily I’ll do it manually like this:

AsyncData<T, (FetchError<ApiError> & { status: number }) | null>

I’m not bothered anymore, thank you for your time and help.