make onSucces be a TS typeguard

[marekvanicek]

So, data from useQuery is the type | undefined. I get that, but should not the data be always present if checked in onSuccess?

For example

function fetchData(): Promise<User[]> {...}
const {data, isSuccess} = useQuery{{queryFn: fetchUsers,..}}

if (isSuccess) {
    data // <- here the data is User[] | undefined. I feel like at this point it should be mandatory for the data to be present. 
    
}

My take on this is that isSuccess should be a type guard. Or introduce a new function that is a typeguard. Making the type in inside the isSucces if statement a User[].

[TkDodo]

So, data from useQuery is the type | undefined

I mean ... that's really not what's happening. I can easily prove this (typescript playground), but it's tiring that you haven't done this yourself ...

[TkDodo]

yep, that's why reproductions are important. You left out that you're using vue ;)

@DamianOsipiuk can you maybe have a look please? On query-core level, we have discriminated union types, but I think they might get lost in vue-land due to the unwrapping that happens?

[marekvanicek]

@TkDodo Yeah, fair enough. Vue-query is all I ever used therefore I thought this was expected behavior across all frameworks. My b!

[DamianOsipiuk]

It is a Vue limitation, but has a workaround.

#5065 (comment)

[marekvanicek]

@DamianOsipiuk so what you are saying is we need to wrap a composable inside a reactive? That sure does sound hacky to me. Isnt there a better way to tackle this?

[DamianOsipiuk]

There is.
We need to make a breaking change and return reactive object instead of object with refs.
This in turn will brak reactivity whenever any dev will destructure result like const {data, isSuccess} = useQuery{{queryFn: fetchUsers,..}} which is exactly what you have tried.
In this case you will stop getting updates. And i think this will be a common error among devs moving from other frameworks like react.
I prefer to keep reactivity more resilient to dev error, than to give you seamless typescript experience.
As typescript can be easily fixed while reactivity problems could be hard to track.