Nuxt•14mo ago•

4 replies

Extracting `useFetch` return type

Is there a better way of extracting the type my server route is returning from a route in vue side of the app? When I do

const { data } = useFetch('/api/public/metadata')
// data is globalThis.Ref<{ someComplicated: type; withMany: properties }> | undefined

const { data } = useFetch('/api/public/metadata')
// data is globalThis.Ref<{ someComplicated: type; withMany: properties }> | undefined

nuxt is aware of what my server route returns and correctly types the

data

data

. But I want to get the type a route returns somewhere else. For example to be used in a component

defineProps

defineProps

if a parent was doing the fetching and component is expecting to receive it

defineProps<{
  fromApi: complicated_type_fetched_in_parent
>()

defineProps<{
  fromApi: complicated_type_fetched_in_parent
>()

without having to manually retype it. I got to

type Tmp = UnwrapRef<Awaited<ReturnType<typeof useFetch<void, Error, `/api/public/:language`>>>['data']>;

type Tmp = UnwrapRef<Awaited<ReturnType<typeof useFetch<void, Error, `/api/public/:language`>>>['data']>;

and it works I guess but properties of

Tmp

Tmp

are all wrapped in

SerializeObject<>

SerializeObject<>

, like

type Tmp = {
  meta: SerializeObject<Record<string, string>>[] | undefined;
}

type Tmp = {
  meta: SerializeObject<Record<string, string>>[] | undefined;
}

Everything still works,

Tmp['meta']

Tmp['meta']

will be

Record<string, string>[]

Record<string, string>[]

but I'm wondering if there's a simpler way