N
Nuxtโ€ข4mo ago
Mike

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.
No description
12 Replies
Mike
MikeOPโ€ข4mo 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
manniLโ€ข4mo 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)
Mike
MikeOPโ€ข4mo 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
manniLโ€ข4mo 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 ...
Mike
MikeOPโ€ข4mo ago
I think so as well. Wouldn't that change automatically in 4.0 when using options?: UseFetchOptions<T> as the function signature?
manniL
manniLโ€ข4mo ago
it might be ๐Ÿค”
Mike
MikeOPโ€ข4mo ago
I'll check Yeah in 4.0, the return type is default?: (() => globalThis.Ref<undefined, undefined> | undefined) | undefined
manniL
manniLโ€ข4mo ago
great!
Mike
MikeOPโ€ข4mo 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
manniLโ€ข4mo ago
If we just use UseFetchOptions<T> without changing the default type, what will data show then? ๐Ÿค”
Mike
MikeOPโ€ข4mo 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
Mike
MikeOPโ€ข4mo 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...
Want results from more Discord servers?
Add your server