EMemptysea·Dec 10, 2022
With `useSWR` the return type is
export interface SWRResponse<Data = any, Error = any> {
/**
* The returned data of the fetcher function.
*/
data: Data | undefined
/**
* The error object thrown by the fetcher function.
*/
error: Error | undefined
mutate: KeyedMutator<Data>
isValidating: boolean
isLoading: boolean
}
https://github.com/vercel/swr/blob/14956a840ac9b75fe321bf846...
so if I check `isLoading` in my component then typescript isn't able to narrow/refine the type to something more specific since it isn't a sum type.
While with react-query, it's a proper sum type that can be differentiated by checking `isLoading`.
The type is actually quite long so here's just a bit
export type QueryObserverResult<TData = unknown, TError = unknown> =
| Query
Read the rest
ObserverIdleResult<TData, TError>
| QueryObserverLoadingErrorResult<TData, TError>
| QueryObserverLoadingResult<TData, TError>
| QueryObserverRefetchErrorResult<TData, TError>
| QueryObserverSuccessResult<TData, TError>
export interface QueryObserverLoadingResult<TData = unknown, TError = unknown>
extends QueryObserverBaseResult<TData, TError> {
data: undefined
error: null
isError: false
isIdle: false
isLoading: true
isLoadingError: false
isRefetchError: false
isSuccess: false
status: 'loading'
}
https://github.com/TanStack/query/blob/9b21609350d9ad41faf5c...
The key point in the type above is `isLoading: true` and `data: undefined`, which means if I check `isLoading === true`, then typescript knows the data is not available.
SWR doesn't provide these guarantees.