N
Nuxt•4d ago
mattiagpg

Custom useAsyncData - $fetch TypeScript error🙏

Hello everybody, I have followed the nuxt 3 guide to create a custom fetch client. All seems to be right, but when I'm going to add TypeScript FetchError<CustomError> in useFetch, I receive this TypeScript error (I'm a TypeScript newbie): 
No overload matches this call.
  Overload 1 of 2, '(request: NitroFetchRequest | Ref<NitroFetchRequest, NitroFetchRequest> | (() => NitroFetchRequest), opts?: UseFetchOptions<...> | undefined): AsyncData<...>', gave the following error.
    Type 'unknown' is not assignable to type '$Fetch<unknown, NitroFetchRequest> | undefined'.
  Overload 2 of 2, '(request: NitroFetchRequest | Ref<NitroFetchRequest, NitroFetchRequest> | (() => NitroFetchRequest), opts?: UseFetchOptions<...> | undefined): AsyncData<...>', gave the following error.
    Type 'unknown' is not assignable to type '$Fetch<unknown, NitroFetchRequest> | undefined'.(2769)
No overload matches this call.
  Overload 1 of 2, '(request: NitroFetchRequest | Ref<NitroFetchRequest, NitroFetchRequest> | (() => NitroFetchRequest), opts?: UseFetchOptions<...> | undefined): AsyncData<...>', gave the following error.
    Type 'unknown' is not assignable to type '$Fetch<unknown, NitroFetchRequest> | undefined'.
  Overload 2 of 2, '(request: NitroFetchRequest | Ref<NitroFetchRequest, NitroFetchRequest> | (() => NitroFetchRequest), opts?: UseFetchOptions<...> | undefined): AsyncData<...>', gave the following error.
    Type 'unknown' is not assignable to type '$Fetch<unknown, NitroFetchRequest> | undefined'.(2769)
I have just upload in StackBlitz: https://stackblitz.com/edit/github-hxq8kzk2?file=composables%2FuseApi.ts I hope that someone can help me 🙏 Thank you guy!
Mattia
StackBlitz
Nuxt - Starter - StackBlitz
Create a new Nuxt project, module, layer or start from a theme with our collection of starters.
2 Replies
kapa.ai
kapa.ai•4d ago
Hi @mattiagpg. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can help you with your custom useAsyncData and $fetch TypeScript error. The issue you're experiencing is related to type casting of the API plugin in the custom useFetch documentation. The error occurs because TypeScript is having trouble inferring the correct type for the $fetch instance you're passing to useFetch. To resolve this, you need to properly type your custom API instance and cast it when using it in your useAPI composable. Here's how you can modify your useAPI composable to fix the TypeScript error: 
import type { FetchError } from 'ofetch'
import type { UseFetchOptions } from 'nuxt/app'

interface CustomError {
  message: string
  statusCode: number
}

export function useAPI<T>(
  url: string | (() => string),
  options?: UseFetchOptions<T>
) {
  const { $api } = useNuxtApp()
  return useFetch<T, FetchError<CustomError>>(url, {
    ...options,
    $fetch: $api as typeof $fetch
  })
}
import type { FetchError } from 'ofetch'
import type { UseFetchOptions } from 'nuxt/app'

interface CustomError {
  message: string
  statusCode: number
}

export function useAPI<T>(
  url: string | (() => string),
  options?: UseFetchOptions<T>
) {
  const { $api } = useNuxtApp()
  return useFetch<T, FetchError<CustomError>>(url, {
    ...options,
    $fetch: $api as typeof $fetch
  })
}
The key change here is casting $api to typeof $fetch when passing it to useFetch. This tells TypeScript that $api has the same type as the built-in $fetch function, which should resolve the type mismatch error you're seeing. This solution is based on the information from the Nuxt documentation on custom useFetch and a related GitHub pull request that addressed this issue PR #29756. Make sure that your $api is properly typed when you create it in your plugin. If you're still encountering issues, you might need to adjust the type of $api in your plugin to match typeof $fetch. Remember to also ensure that your nuxt.config.ts file is properly set up to use TypeScript, and that you have the latest version of Nuxt and its TypeScript dependencies installed. If you continue to face issues after making these changes, you might want to consider creating a minimal reproduction of the problem and sharing it on the Nuxt GitHub repository for further assistance from the maintainers. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4d ago
<@700783732109344930> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?