Nuxt•5mo ago

Typing a custom `useFetch` to include null

I've created a custom implementation to handle caching and error handling. I've followed these docs: https://nuxt.com/docs/guide/recipes/custom-usefetch#custom-usefetchuseasyncdata However unlike a the native useFetch, the type of data doesn't include null I've attached a screenshot where you can see the types. The code is this:

import type { UseFetchOptions } from "nuxt/app"

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

type MyReturnType = { data: string }
const { data: a } = await useFetch<MyReturnType>("/api/url")
//            ^?
const { data: b } = await useAPI<MyReturnType>("/api/url")
//            ^?

import type { UseFetchOptions } from "nuxt/app"

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

type MyReturnType = { data: string }
const { data: a } = await useFetch<MyReturnType>("/api/url")
//            ^?
const { data: b } = await useAPI<MyReturnType>("/api/url")
//            ^?

I've also tried typing my custom fetch return type with ReturnType<typeof useFetch>, with no results. How can I type my custom fetch to make the data type be Ref<T | null>?

Nuxt

Custom useFetch in Nuxt · Recipes

How to create a custom fetcher for calling your external API in Nuxt 3.

12 Replies

MikeOP•5mo ago

I figured it out. Works if I add | null to the to the default return type:

function useAPI<T>(
  url: string | (() => string),
  options?: Omit<UseFetchOptions<T>, "default"> & { default?: () => T | Ref<T | null> },
) {
  return useFetch(url, {
    ...options,
    $fetch: useNuxtApp().$api,
  })
}

function useAPI<T>(
  url: string | (() => string),
  options?: Omit<UseFetchOptions<T>, "default"> & { default?: () => T | Ref<T | null> },
) {
  return useFetch(url, {
    ...options,
    $fetch: useNuxtApp().$api,
  })
}

I also made the options and default optional to bring it in line with regular useFetch usage. @manniL / TheAlexLichter should I update the recipe with these types?

manniL•5mo ago

@Mike if you use UseFetchOptions<T>, what is the type of default there? (I think null should be part of the type indeed, yes)

MikeOP•5mo ago

The type of default is default?: (() => globalThis.Ref<null> | null) | undefined, with this function signature:

export function useCachedFetch<T>(
  url: string | (() => string),
  options?: UseFetchOptions<T>,
) {
// my function
}

export function useCachedFetch<T>(
  url: string | (() => string),
  options?: UseFetchOptions<T>,
) {
// my function
}

This is in a nuxt 3.11.2 project, want me to check with 3.12? Just checked in a 3.12 project, seems to be the same

manniL•5mo ago

based on https://github.com/nuxt/nuxt/pull/27294 I rather would suggest undefined

GitHub

fix(nuxt): use undefined rather than null for data fetching def...

🔗 Linked issue resolves #26295 📚 Description This updates the default value for error + data in useFetch and useAsyncData, as well as in useError(). It updates both the types and the runtime value ...

MikeOP•5mo ago

I think so as well. Wouldn't that change automatically in 4.0 when using options?: UseFetchOptions<T> as the function signature?

manniL•5mo ago

it might be 🤔

MikeOP•5mo ago

I'll check Yeah in 4.0, the return type is default?: (() => globalThis.Ref<undefined, undefined> | undefined) | undefined

manniL•5mo ago

great!

MikeOP•5mo ago

Should I update the recipe to use this function signature?

export function UseAPI<T>(
  url: string | (() => string),
  options?: UseFetchOptions<T>,
) {

export function UseAPI<T>(
  url: string | (() => string),
  options?: UseFetchOptions<T>,
) {

manniL•5mo ago

If we just use UseFetchOptions<T> without changing the default type, what will data show then? 🤔

MikeOP•5mo ago

In 4.0 it seems to be globalThis.Ref<string | undefined, string | undefined> and in 3.12 it's globalThis.Ref<string | null> when doing const {data} = await useAPI<string>('test') Don't know why the type is repeated twice in 4.0

MikeOP•5mo ago

I've created a draft PR here: https://github.com/nuxt/nuxt/pull/28389

GitHub

docs: fix options type in custom useFetch recipe by MikeBellika ·...

📚 Description When using the existing recipe, the return type of data doesn't include null (or undefined in 4.0) import type { UseFetchOptions } from "nuxt/app" export function useA...

Gaming

Programming

Typing a custom `useFetch` to include null