Nuxt•3w ago

Custom use fetch type error

I'm trying to build a custom use fetch composable and I have followed the nuxt documentation. The custom composable is always screaming a typescript error to me that there is no overload for this useFetchCall with these types.

Vue: No overload matches this call.
Overload 1 of 2,
(request: NitroFetchRequest | Ref<NitroFetchRequest, NitroFetchRequest> | (() => NitroFetchRequest), opts?: UseFetchOptions<...> | undefined): AsyncData<...>
, gave the following error.
Overload 2 of 2,
(request: NitroFetchRequest | Ref<NitroFetchRequest, NitroFetchRequest> | (() => NitroFetchRequest), opts?: UseFetchOptions<...> | undefined): AsyncData<...>
, gave the following error.

Vue: No overload matches this call.
Overload 1 of 2,
(request: NitroFetchRequest | Ref<NitroFetchRequest, NitroFetchRequest> | (() => NitroFetchRequest), opts?: UseFetchOptions<...> | undefined): AsyncData<...>
, gave the following error.
Overload 2 of 2,
(request: NitroFetchRequest | Ref<NitroFetchRequest, NitroFetchRequest> | (() => NitroFetchRequest), opts?: UseFetchOptions<...> | undefined): AsyncData<...>
, gave the following error.

This is the code snippet:

import type { UseFetchOptions } from 'nuxt/app'
import type {ProblemDetails} from "~/types";
import {FetchError} from "ofetch";

export function useAPI<T>(
    url: string | (() => string),
    options?: UseFetchOptions<T>,
) {
  return useFetch<T, FetchError<ProblemDetails>>(url, {
    ...options,
    $fetch: useNuxtApp().$api 
  })
}

import type { UseFetchOptions } from 'nuxt/app'
import type {ProblemDetails} from "~/types";
import {FetchError} from "ofetch";

export function useAPI<T>(
    url: string | (() => string),
    options?: UseFetchOptions<T>,
) {
  return useFetch<T, FetchError<ProblemDetails>>(url, {
    ...options,
    $fetch: useNuxtApp().$api 
  })
}

5 Replies

kapa.ai•3w ago

Hi @LordGhandi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Your TypeScript error is likely due to a type mismatch between your custom $api instance and what Nuxt expects for the $fetch option in useFetch. This is a common issue when creating a custom fetch composable in Nuxt. Solution:
You need to explicitly cast your custom $api instance to the correct type (typeof $fetch) when passing it to the $fetch option in useFetch. This ensures TypeScript understands that your $api is compatible with the expected fetch signature. Here’s how you should update your composable:

import type { UseFetchOptions } from 'nuxt/app'
import type { ProblemDetails } from '~/types'
import type { FetchError } from 'ofetch'

export function useAPI<T>(
  url: string | (() => string),
  options?: UseFetchOptions<T>
) {
  return useFetch<T, FetchError<ProblemDetails>>(url, {
    ...options,
    $fetch: useNuxtApp().$api as typeof $fetch
  })
}

import type { UseFetchOptions } from 'nuxt/app'
import type { ProblemDetails } from '~/types'
import type { FetchError } from 'ofetch'

export function useAPI<T>(
  url: string | (() => string),
  options?: UseFetchOptions<T>
) {
  return useFetch<T, FetchError<ProblemDetails>>(url, {
    ...options,
    $fetch: useNuxtApp().$api as typeof $fetch
  })
}

This explicit type cast (as typeof $fetch) is documented in the Nuxt guide for Custom useFetch, and it resolves the TypeScript overload error you’re seeing. Reference:
See the official Nuxt documentation for a working example and further explanation: Custom useFetch in Nuxt. If you continue to see errors, ensure that your custom $api is correctly provided via a Nuxt plugin and that your types for ProblemDetails and FetchError are correct and imported from the right sources. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@358749735323959308> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

LordGhandiOP•3w ago

@kapa.ai This still gives me an error from $fetch: useNuxtApp()... line with the same description: Vue: No overload matches this call. Overload 1 of 2, (request: NitroFetchRequest | Ref<NitroFetchRequest, NitroFetchRequest> | (() => NitroFetchRequest), opts?: UseFetchOptions<...> | undefined): AsyncData<...> , gave the following error. Overload 2 of 2, (request: NitroFetchRequest | Ref<NitroFetchRequest, NitroFetchRequest> | (() => NitroFetchRequest), opts?: UseFetchOptions<...> | undefined): AsyncData<...> , gave the following error.

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The TypeScript error you are seeing is a known issue when creating a custom useFetch composable and passing a custom $fetch instance. The Nuxt documentation for Custom useFetch specifically recommends casting your custom $api as typeof $fetch to resolve type errors:

$fetch: useNuxtApp().$api as typeof $fetch

$fetch: useNuxtApp().$api as typeof $fetch

However, there have been reports that even with this cast, TypeScript may still complain about overloads not matching, especially in strict setups or certain editor configurations. This is also mentioned in a recent Nuxt documentation update, which added explicit type casting to address TypeScript linting issues. If you are still getting the error after casting, it may be due to a mismatch between the actual type of your $api instance and what Nuxt expects for $fetch. Double-check that your plugin providing $api is correctly returning a $fetch-compatible instance, as shown in the docs:

// plugins/api.ts
export default defineNuxtPlugin((nuxtApp) => {
  const api = $fetch.create({ /* ... */ })
  return { provide: { api } }
})

// plugins/api.ts
export default defineNuxtPlugin((nuxtApp) => {
  const api = $fetch.create({ /* ... */ })
  return { provide: { api } }
})

If you are following the documentation and still encountering the error, it may be a limitation or bug in the current type definitions, as discussed in the Nuxt GitHub issue and pull request. The knowledge sources do not provide a workaround beyond the explicit type cast. Summary:
- Use the explicit type cast: $fetch: useNuxtApp().$api as typeof $fetch - Ensure your $api is a $fetch-compatible instance - If the error persists, it may be a limitation in the current Nuxt type system, as acknowledged in the documentation and GitHub discussions If you need a more robust solution, you may need to wait for further updates from the Nuxt team, as this is an area under active discussion and improvement in the framework's documentation and type definitionsCustom useFetch in Nuxt, docs: add type casting of api plugin to custom-usefetch documentation, Defining $fetch within useFetch() doesnt pass cookies on SSR. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@358749735323959308> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Custom use fetch type error

Did you find this page helpful?