SWR 2.0 – React Hooks for Data Fetching

    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
    }
 

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'
    }

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.