Hacker News new | past | comments | ask | show | jobs | submit login

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> =
      | QueryObserverIdleResult<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.




Thank you for the explanation!




Join us for AI Startup School this June 16-17 in San Francisco!

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: