I use the useFetch() composable in Nuxt (3.16) and VS Code signals that one of the properties I get from the call does not exist -- this is in reality a type comparison issue I do not understand.

My call is:

const { data, error } = await useFetch(`/api/auth/login?provider=${provider}`)

data has the following signature:

const data: globalThis.Ref<Simplify<SerializeObject<{
    error: string;
    url?: undefined;
    success?: undefined;
    user?: undefined;
    token?: undefined;
}> | SerializeObject<{
    url: string;
    error?: undefined;
    success?: undefined;
    user?: undefined;
    token?: undefined;
}> | SerializeObject<...> | SerializeObject<...> | SerializeObject<...>> | null, Simplify<...> | null>

Further on I am accessing the url property:

if (data.value?.url) {
   window.location.href = data.value.url
}

url has a wiggle underneath and TS signals that

Property 'url' does not exist on type 'Simplify<SerializeObject<{ error: string; url?: undefined; success?: undefined; user?: undefined; token?: undefined; }> | SerializeObject<{ url: string; error?: undefined; success?: undefined; user?: undefined; token?: undefined; }> | SerializeObject<...> | SerializeObject<...> | SerializeObject<...>>'.
  Property 'url' does not exist on type '{ error: string; }'.ts(2339)

While the code works fine, I would like to cleanly fix this error and use the opportunity to understand how to compare such types.

I use the useFetch() composable in Nuxt (3.16) and VS Code signals that one of the properties I get from the call does not exist -- this is in reality a type comparison issue I do not understand.

My call is:

const { data, error } = await useFetch(`/api/auth/login?provider=${provider}`)

data has the following signature:

const data: globalThis.Ref<Simplify<SerializeObject<{
    error: string;
    url?: undefined;
    success?: undefined;
    user?: undefined;
    token?: undefined;
}> | SerializeObject<{
    url: string;
    error?: undefined;
    success?: undefined;
    user?: undefined;
    token?: undefined;
}> | SerializeObject<...> | SerializeObject<...> | SerializeObject<...>> | null, Simplify<...> | null>

Further on I am accessing the url property:

if (data.value?.url) {
   window.location.href = data.value.url
}

url has a wiggle underneath and TS signals that

Property 'url' does not exist on type 'Simplify<SerializeObject<{ error: string; url?: undefined; success?: undefined; user?: undefined; token?: undefined; }> | SerializeObject<{ url: string; error?: undefined; success?: undefined; user?: undefined; token?: undefined; }> | SerializeObject<...> | SerializeObject<...> | SerializeObject<...>>'.
  Property 'url' does not exist on type '{ error: string; }'.ts(2339)

While the code works fine, I would like to cleanly fix this error and use the opportunity to understand how to compare such types.

• typescript
• vue.js
• nuxt.js

Share Improve this question Follow edited Mar 25 at 9:31 WoJ asked Mar 25 at 9:24 WoJWoJ 30.1k5858 gold badges214214 silver badges405405 bronze badges 1

• All errors observed in IDE need to be narrowed down. If there's no error on build then the question needs to be asked about specific ide, it could be a bug that needs to be reported. I'd assume it's the latter. Otherwise, please, provide a way to reproduce. Generally if (data.value?.url) is ok – Estus Flask Commented Mar 25 at 10:20

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

You need to pass types to useFetch because it has generic type inference for data. If you do this, there will be no error:

const { data } = await useFetch<{
  error: string;
  url?: undefined;
  success?: undefined;
  user?: undefined;
  token?: undefined;
}>("/api/auth/", {
  query: { provider: "google" },
});

console.log(data.value?.url);