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:
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
I figured it out. Works if I add
| null
to the to the default
return type:
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?@Mike if you use
UseFetchOptions<T>
, what is the type of default
there?
(I think null
should be part of the type indeed, yes)The type of default is
default?: (() => globalThis.Ref<null> | null) | undefined
, with this function signature:
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 sameGitHub
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 ...
I think so as well. Wouldn't that change automatically in 4.0 when using
options?: UseFetchOptions<T>
as the function signature?it might be ๐ค
I'll check
Yeah in 4.0, the return type is
default?: (() => globalThis.Ref<undefined, undefined> | undefined) | undefined
great!
Should I update the recipe to use this function signature?
If we just use
UseFetchOptions<T>
without changing the default type, what will data
show then? ๐ค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.0I'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...