feat(query-core, react-query): backport v5 types, deprecate isLoading in favor of isPending in mutation observer results (#9266)

* feat(query-core, react-query): add types, deprecate `isLoading` in favor of `isPending` in mutation observer results

* refactor(react-query): update import path in Hydrate test file

Author: manudeli

packages/query-core/src/types.ts

@@ -669,6 +669,9 @@ export interface MutationObserverBaseResult<
 > extends MutationState<TData, TError, TVariables, TContext> {
   isError: boolean
   isIdle: boolean
+  /**
+   * @deprecated This property will be removed in the next major version. Use `isPending` instead.
+   */
   isLoading: boolean
   isPending: boolean
   isSuccess: boolean
@@ -686,7 +689,11 @@ export interface MutationObserverIdleResult<
   error: null
   isError: false
   isIdle: true
+  /**
+   * @deprecated This property will be removed in the next major version. Use `isPending` instead.
+   */
   isLoading: false
+  isPending: false
   isSuccess: false
   status: 'idle'
 }
@@ -701,7 +708,11 @@ export interface MutationObserverLoadingResult<
   error: null
   isError: false
   isIdle: false
+  /**
+   * @deprecated This property will be removed in the next major version. Use `isPending` instead.
+   */
   isLoading: true
+  isPending: true
   isSuccess: false
   status: 'loading'
 }
@@ -716,7 +727,11 @@ export interface MutationObserverErrorResult<
   error: TError
   isError: true
   isIdle: false
+  /**
+   * @deprecated This property will be removed in the next major version. Use `isPending` instead.
+   */
   isLoading: false
+  isPending: false
   isSuccess: false
   status: 'error'
 }
@@ -731,7 +746,11 @@ export interface MutationObserverSuccessResult<
   error: null
   isError: false
   isIdle: false
+  /**
+   * @deprecated This property will be removed in the next major version. Use `isPending` instead.
+   */
   isLoading: false
+  isPending: false
   isSuccess: true
   status: 'success'
 }

packages/react-query/src/__tests__/Hydrate.test.tsx

@@ -10,7 +10,7 @@ import {
   dehydrate,
   useHydrate,
   useQuery,
-} from '@tanstack/react-query'
+} from '..'
 import { createQueryClient, sleep } from './utils'
 
 describe('React hydration', () => {

packages/react-query/src/__tests__/queryOptions.types.test.tsx

@@ -1,16 +1,17 @@
 import { expectTypeOf } from 'expect-type'
 import {
+  type DefinedUseQueryResult,
   QueryCache,
   type UseQueryResult,
+  type UseSuspenseQueryResult,
+  queryOptions,
   useQueries,
   useQuery,
   useQueryClient,
-} from '@tanstack/react-query'
-import { queryOptions } from '..'
-import { useSuspenseQueries, useSuspenseQuery } from '..'
-import { type UseSuspenseQueryResult } from '../useSuspenseQuery'
+  useSuspenseQueries,
+  useSuspenseQuery,
+} from '..'
 import { doNotExecute } from './utils'
-import type { DefinedUseQueryResult } from '@tanstack/react-query'
 
 const queryKey = ['key'] as const
 const queryFn = () => Promise.resolve({ field: 'success' })

packages/react-query/src/__tests__/useSuspenseQueries.types.test.tsx

@@ -1,8 +1,10 @@
 import { expectTypeOf } from 'expect-type'
-import { queryOptions } from '..'
-import { useSuspenseQueries } from '..'
+import {
+  type UseSuspenseQueryResult,
+  queryOptions,
+  useSuspenseQueries,
+} from '..'
 import { doNotExecute } from './utils'
-import type { UseSuspenseQueryResult } from '../useSuspenseQuery'
 
 export const queryKey = ['key'] as const
 const sleep = (ms: number) =>

packages/react-query/src/__tests__/useSuspenseQuery.types.test.tsx

@@ -1,9 +1,5 @@
 import { expectTypeOf } from 'expect-type'
-import {
-  type UseSuspenseQueryResult,
-  useSuspenseQuery,
-} from '../useSuspenseQuery'
-import { queryOptions } from '..'
+import { type UseSuspenseQueryResult, queryOptions, useSuspenseQuery } from '..'
 import { doNotExecute } from './utils'
 
 const queryKey = ['key'] as const

packages/react-query/src/index.ts

@@ -13,6 +13,15 @@ export type { QueriesResults, QueriesOptions } from './useQueries'
 export { useQuery } from './useQuery'
 export { useSuspenseQuery } from './useSuspenseQuery'
 export { useSuspenseQueries } from './useSuspenseQueries'
+export type {
+  SuspenseQueriesResults,
+  SuspenseQueriesOptions,
+} from './useSuspenseQueries'
+export { queryOptions } from './queryOptions'
+export type {
+  DefinedInitialDataOptions,
+  UndefinedInitialDataOptions,
+} from './queryOptions'
 export {
   defaultContext,
   QueryClientProvider,
@@ -31,4 +40,3 @@ export { useIsMutating } from './useIsMutating'
 export { useMutation } from './useMutation'
 export { useInfiniteQuery } from './useInfiniteQuery'
 export { useIsRestoring, IsRestoringProvider } from './isRestoring'
-export { queryOptions } from './queryOptions'

packages/react-query/src/queryOptions.ts

@@ -22,7 +22,7 @@ type ProhibitedQueryOptionsKeyInV5 = keyof Pick<
   'useErrorBoundary' | 'suspense' | 'getNextPageParam' | 'getPreviousPageParam'
 >
 
-type UndefinedInitialDataOptions<
+export type UndefinedInitialDataOptions<
   TQueryFnData = unknown,
   TError = unknown,
   TData = TQueryFnData,
@@ -34,7 +34,7 @@ type UndefinedInitialDataOptions<
     | NonUndefinedGuard<TQueryFnData>
 }
 
-type DefinedInitialDataOptions<
+export type DefinedInitialDataOptions<
   TQueryFnData = unknown,
   TError = unknown,
   TData = TQueryFnData,

packages/react-query/src/types.ts

@@ -3,11 +3,13 @@
 import type * as React from 'react'
 import type {
   DefinedQueryObserverResult,
+  DistributiveOmit,
   InfiniteQueryObserverOptions,
   InfiniteQueryObserverResult,
   MutateFunction,
   MutationObserverOptions,
   MutationObserverResult,
+  OmitKeyof,
   QueryKey,
   QueryObserverOptions,
   QueryObserverResult,
@@ -43,6 +45,25 @@ export interface UseQueryOptions<
     TQueryKey
   > {}
 
+export type UseSuspenseQueryOptions<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+> = OmitKeyof<
+  UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+  | 'enabled'
+  | 'useErrorBoundary'
+  | 'suspense'
+  | 'placeholderData'
+  | 'networkMode'
+  | 'onSuccess'
+  | 'onError'
+  | 'onSettled'
+  | 'getPreviousPageParam'
+  | 'getNextPageParam'
+>
+
 export interface UseInfiniteQueryOptions<
   TQueryFnData = unknown,
   TError = unknown,
@@ -68,6 +89,14 @@ export type UseQueryResult<
   TError = unknown,
 > = UseBaseQueryResult<TData, TError>
 
+export type UseSuspenseQueryResult<
+  TData = unknown,
+  TError = unknown,
+> = DistributiveOmit<
+  DefinedQueryObserverResult<TData, TError>,
+  'isPlaceholderData'
+>
+
 export type DefinedUseBaseQueryResult<
   TData = unknown,
   TError = unknown,

packages/react-query/src/useQuery.ts

@@ -136,7 +136,6 @@ export function useQuery<
     'queryKey' | 'queryFn'
   >,
 ): UseQueryResult<TData, TError>
-/** @deprecated */
 export function useQuery<
   TQueryFnData,
   TError,

packages/react-query/src/useSuspenseQueries.ts

@@ -1,10 +1,10 @@
 import { useQueries } from './useQueries'
-import type { UseQueryOptions } from './types'
-import type { NetworkMode, QueryFunction } from '@tanstack/query-core'
 import type {
+  UseQueryOptions,
   UseSuspenseQueryOptions,
   UseSuspenseQueryResult,
-} from './useSuspenseQuery'
+} from './types'
+import type { NetworkMode, QueryFunction } from '@tanstack/query-core'
 
 // Avoid TS depth-limit error in case of large array literal
 type MAXIMUM_DEPTH = 20