feat(react-query): useSuspenseQuery

packages/query-core/src/types.ts

@@ -585,14 +585,20 @@ export interface InfiniteQueryObserverSuccessResult<
   status: 'success'
 }
 
+export type DefinedInfiniteQueryObserverResult<
+  TData = unknown,
+  TError = DefaultError,
+> =
+  | InfiniteQueryObserverRefetchErrorResult<TData, TError>
+  | InfiniteQueryObserverSuccessResult<TData, TError>
+
 export type InfiniteQueryObserverResult<
   TData = unknown,
   TError = DefaultError,
 > =
   | InfiniteQueryObserverLoadingErrorResult<TData, TError>
   | InfiniteQueryObserverLoadingResult<TData, TError>
-  | InfiniteQueryObserverRefetchErrorResult<TData, TError>
-  | InfiniteQueryObserverSuccessResult<TData, TError>
+  | DefinedInfiniteQueryObserverResult<TData, TError>
 
 export type MutationKey = readonly unknown[]
 

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

@@ -5422,11 +5422,8 @@ describe('useQuery', () => {
       const rendered = renderWithClient(queryClient, <Page />)
 
       await waitFor(() =>
-        rendered.getByText(
-          'status: pending, fetchStatus: fetching, failureCount: 1',
-        ),
+        rendered.getByText(/status: pending, fetchStatus: fetching/i),
       )
-      await waitFor(() => rendered.getByText('failureReason: failed1'))
 
       const onlineMock = mockOnlineManagerIsOnline(false)
       window.dispatchEvent(new Event('offline'))

packages/react-query/src/index.ts

@@ -8,7 +8,10 @@ export * from './types'
 export { useQueries } from './useQueries'
 export type { QueriesResults, QueriesOptions } from './useQueries'
 export { useQuery } from './useQuery'
+export { useSuspenseQuery } from './useSuspenseQuery'
+export { useSuspenseInfiniteQuery } from './useSuspenseInfiniteQuery'
 export { queryOptions } from './queryOptions'
+export { infiniteQueryOptions } from './infiniteQueryOptions'
 export {
   QueryClientContext,
   QueryClientProvider,

packages/react-query/src/infiniteQueryOptions.ts

@@ -0,0 +1,93 @@
+import type { InfiniteData } from '@tanstack/query-core'
+import type { UseInfiniteQueryOptions } from './types'
+import type { DefaultError, QueryKey } from '@tanstack/query-core'
+
+export type UndefinedInitialDataInfiniteOptions<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+  TPageParam = unknown,
+> = UseInfiniteQueryOptions<
+  TQueryFnData,
+  TError,
+  TData,
+  TQueryData,
+  TQueryKey,
+  TPageParam
+> & {
+  initialData?: undefined
+}
+
+export type DefinedInitialDataInfiniteOptions<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+  TPageParam = unknown,
+> = UseInfiniteQueryOptions<
+  TQueryFnData,
+  TError,
+  TData,
+  TQueryData,
+  TQueryKey,
+  TPageParam
+> & {
+  initialData: InfiniteData<TQueryData> | (() => InfiniteData<TQueryData>)
+}
+
+export function infiniteQueryOptions<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+  TPageParam = unknown,
+>(
+  options: UndefinedInitialDataInfiniteOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryFnData,
+    TQueryKey,
+    TPageParam
+  >,
+): UndefinedInitialDataInfiniteOptions<
+  TQueryFnData,
+  TError,
+  TData,
+  TQueryFnData,
+  TQueryKey,
+  TPageParam
+>
+
+export function infiniteQueryOptions<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+  TPageParam = unknown,
+>(
+  options: DefinedInitialDataInfiniteOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryFnData,
+    TQueryKey,
+    TPageParam
+  >,
+): DefinedInitialDataInfiniteOptions<
+  TQueryFnData,
+  TError,
+  TData,
+  TQueryFnData,
+  TQueryKey,
+  TPageParam
+>
+
+export function infiniteQueryOptions(options: unknown) {
+  return options
+}

packages/react-query/src/types.ts

@@ -2,6 +2,7 @@
 
 import type {
   DefaultError,
+  DefinedInfiniteQueryObserverResult,
   DefinedQueryObserverResult,
   InfiniteQueryObserverOptions,
   InfiniteQueryObserverResult,
@@ -64,20 +65,20 @@ export type UseQueryResult<
   TError = DefaultError,
 > = UseBaseQueryResult<TData, TError>
 
-export type DefinedUseBaseQueryResult<
+export type DefinedUseQueryResult<
   TData = unknown,
   TError = DefaultError,
 > = DefinedQueryObserverResult<TData, TError>
 
-export type DefinedUseQueryResult<
+export type UseInfiniteQueryResult<
   TData = unknown,
   TError = DefaultError,
-> = DefinedUseBaseQueryResult<TData, TError>
+> = InfiniteQueryObserverResult<TData, TError>
 
-export type UseInfiniteQueryResult<
+export type DefinedUseInfiniteQueryResult<
   TData = unknown,
   TError = DefaultError,
-> = InfiniteQueryObserverResult<TData, TError>
+> = DefinedInfiniteQueryObserverResult<TData, TError>
 
 export interface UseMutationOptions<
   TData = unknown,

packages/react-query/src/useInfiniteQuery.ts

@@ -8,9 +8,52 @@ import type {
   QueryKey,
   QueryObserver,
 } from '@tanstack/query-core'
-import type { UseInfiniteQueryOptions, UseInfiniteQueryResult } from './types'
+import type {
+  DefinedUseInfiniteQueryResult,
+  UseInfiniteQueryOptions,
+  UseInfiniteQueryResult,
+} from './types'
+import type {
+  DefinedInitialDataInfiniteOptions,
+  UndefinedInitialDataInfiniteOptions,
+} from './infiniteQueryOptions'
+
+export function useInfiniteQuery<
+  TQueryFnData,
+  TError = DefaultError,
+  TData = InfiniteData<TQueryFnData>,
+  TQueryKey extends QueryKey = QueryKey,
+  TPageParam = unknown,
+>(
+  options: UndefinedInitialDataInfiniteOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryFnData,
+    TQueryKey,
+    TPageParam
+  >,
+  queryClient?: QueryClient,
+): UseInfiniteQueryResult<TData, TError>
+
+export function useInfiniteQuery<
+  TQueryFnData,
+  TError = DefaultError,
+  TData = InfiniteData<TQueryFnData>,
+  TQueryKey extends QueryKey = QueryKey,
+  TPageParam = unknown,
+>(
+  options: DefinedInitialDataInfiniteOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryFnData,
+    TQueryKey,
+    TPageParam
+  >,
+  queryClient?: QueryClient,
+): DefinedUseInfiniteQueryResult<TData, TError>
 
-// HOOK
 export function useInfiniteQuery<
   TQueryFnData,
   TError = DefaultError,

packages/react-query/src/useQuery.ts

@@ -12,8 +12,6 @@ import type {
   UndefinedInitialDataOptions,
 } from './queryOptions'
 
-// HOOK
-
 export function useQuery<
   TQueryFnData = unknown,
   TError = DefaultError,

packages/react-query/src/useSuspenseInfiniteQuery.ts

@@ -0,0 +1,45 @@
+'use client'
+import { InfiniteQueryObserver } from '@tanstack/query-core'
+import { useBaseQuery } from './useBaseQuery'
+import type { QueryObserver } from '@tanstack/query-core'
+import type {
+  DefaultError,
+  InfiniteData,
+  QueryClient,
+  QueryKey,
+} from '@tanstack/query-core'
+import type { DefinedUseInfiniteQueryResult } from './types'
+import type { UseInfiniteQueryOptions } from './types'
+
+export function useSuspenseInfiniteQuery<
+  TQueryFnData,
+  TError = DefaultError,
+  TData = InfiniteData<TQueryFnData>,
+  TQueryKey extends QueryKey = QueryKey,
+  TPageParam = unknown,
+>(
+  options: Omit<
+    UseInfiniteQueryOptions<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryFnData,
+      TQueryKey,
+      TPageParam
+    >,
+    'enabled' | 'suspense' | 'throwOnError' | 'placeholderData'
+  >,
+  queryClient?: QueryClient,
+): Omit<DefinedUseInfiniteQueryResult<TData, TError>, 'isPlaceholderData'> {
+  return useBaseQuery(
+    {
+      ...options,
+      enabled: true,
+      suspense: true,
+      throwOnError: true,
+    },
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+    InfiniteQueryObserver as typeof QueryObserver,
+    queryClient,
+  ) as DefinedUseInfiniteQueryResult<TData, TError>
+}

packages/react-query/src/useSuspenseQuery.ts

@@ -0,0 +1,30 @@
+'use client'
+import { QueryObserver } from '@tanstack/query-core'
+import { useBaseQuery } from './useBaseQuery'
+import type { UseQueryOptions } from './types'
+import type { DefaultError, QueryClient, QueryKey } from '@tanstack/query-core'
+import type { DefinedUseQueryResult } from './types'
+
+export function useSuspenseQuery<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  options: Omit<
+    UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+    'enabled' | 'suspense' | 'throwOnError' | 'placeholderData'
+  >,
+  queryClient?: QueryClient,
+): Omit<DefinedUseQueryResult<TData, TError>, 'isPlaceholderData'> {
+  return useBaseQuery(
+    {
+      ...options,
+      enabled: true,
+      suspense: true,
+      throwOnError: true,
+    },
+    QueryObserver,
+    queryClient,
+  ) as DefinedUseQueryResult<TData, TError>
+}