Nuxt•3w ago

Custom useFetch

I'm refactoring my custom use fetch since the api always returns a specific type if there is an error. How can I specify when there is an error response from the api that it is of type MyApiErrorResponse or something else?

3 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: ---------------------- To specify a custom error type (e.g., MyApiErrorResponse) for your custom useFetch composable in Nuxt, you can leverage the generic parameters of useFetch. The second generic parameter of useFetch allows you to define the error type. Here’s how you can do it:

import type { UseFetchOptions } from 'nuxt/app'

interface MyApiErrorResponse {
  message: string
  code: number
  // ...other fields
}

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

import type { UseFetchOptions } from 'nuxt/app'

interface MyApiErrorResponse {
  message: string
  code: number
  // ...other fields
}

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

Now, when you use your custom useAPI composable, the error ref will be typed as Ref<MyApiErrorResponse | undefined>, allowing you to safely access your custom error fields:

const { data, error } = await useAPI<MyDataType>('/api/endpoint')

if (error.value) {
  // error.value is of type MyApiErrorResponse
  console.error(error.value.message)
}

const { data, error } = await useAPI<MyDataType>('/api/endpoint')

if (error.value) {
  // error.value is of type MyApiErrorResponse
  console.error(error.value.message)
}

This approach is documented in the Nuxt guide for custom useFetch composables, including an example with a custom error type using the FetchError from ofetch, but you can substitute your own error interface as shown above. This ensures type safety and better error handling in your application Custom useFetch in Nuxt. ---------------------- 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

This still gives my a Typescript 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

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

I also tried to change the type of ProblemDetails in the return useFetch to FetchError<ProblemDetails> :

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

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

It still gives the same error

Gaming

Programming

Custom useFetch

Did you find this page helpful?