@tanstack/react-query 5.0.0-alpha.9 → 5.0.0-alpha.91

package/src/__tests__/useQuery.types.test.tsx

@@ -1,6 +1,7 @@
 import { useQuery } from '../useQuery'
-import type { Expect, Equal } from './utils'
+import { queryOptions } from '../queryOptions'
 import { doNotExecute } from './utils'
+import type { Equal, Expect } from './utils'
 
 describe('initialData', () => {
   describe('Config object overload', () => {
@@ -23,6 +24,26 @@ describe('initialData', () => {
       })
     })
 
+    it('TData should be defined when passed through queryOptions', () => {
+      doNotExecute(() => {
+        const options = queryOptions({
+          queryKey: ['key'],
+          queryFn: () => {
+            return {
+              wow: true,
+            }
+          },
+          initialData: {
+            wow: true,
+          },
+        })
+        const { data } = useQuery(options)
+
+        const result: Expect<Equal<{ wow: boolean }, typeof data>> = true
+        return result
+      })
+    })
+
     it('TData should always be defined when initialData is provided as a function which ALWAYS returns the data', () => {
       doNotExecute(() => {
         const { data } = useQuery({

package/src/__tests__/utils.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react'
 import { act, render } from '@testing-library/react'
-import type { QueryClientConfig } from '..'
-import { QueryClient, QueryClientProvider } from '..'
+
 import * as utils from '@tanstack/query-core'
 import { vi } from 'vitest'
+import { QueryClient, QueryClientProvider, onlineManager } from '..'
+import type { QueryClientConfig } from '..'
+import type { SpyInstance } from 'vitest'
 
 export function renderWithClient(
   client: QueryClient,
@@ -45,12 +47,16 @@ export function createQueryClient(config?: QueryClientConfig): QueryClient {
   return new QueryClient(config)
 }
 
-export function mockVisibilityState(value: DocumentVisibilityState) {
+export function mockVisibilityState(
+  value: DocumentVisibilityState,
+): SpyInstance<[], DocumentVisibilityState> {
   return vi.spyOn(document, 'visibilityState', 'get').mockReturnValue(value)
 }
 
-export function mockNavigatorOnLine(value: boolean) {
-  return vi.spyOn(navigator, 'onLine', 'get').mockReturnValue(value)
+export function mockOnlineManagerIsOnline(
+  value: boolean,
+): SpyInstance<[], boolean> {
+  return vi.spyOn(onlineManager, 'isOnline').mockReturnValue(value)
 }
 
 let queryKeyCount = 0

package/src/errorBoundaryUtils.ts

@@ -1,14 +1,14 @@
 'use client'
+import * as React from 'react'
+import { shouldThrowError } from './utils'
 import type {
   DefaultedQueryObserverOptions,
   Query,
   QueryKey,
   QueryObserverResult,
-  ThrowErrors,
+  ThrowOnError,
 } from '@tanstack/query-core'
 import type { QueryErrorResetBoundaryValue } from './QueryErrorResetBoundary'
-import * as React from 'react'
-import { shouldThrowError } from './utils'
 
 export const ensurePreventErrorBoundaryRetry = <
   TQueryFnData,
@@ -26,7 +26,7 @@ export const ensurePreventErrorBoundaryRetry = <
   >,
   errorResetBoundary: QueryErrorResetBoundaryValue,
 ) => {
-  if (options.suspense || options.throwErrors) {
+  if (options.suspense || options.throwOnError) {
     // Prevent retrying failed query if the error boundary has not been reset yet
     if (!errorResetBoundary.isReset()) {
       options.retryOnMount = false
@@ -51,18 +51,18 @@ export const getHasError = <
 >({
   result,
   errorResetBoundary,
-  throwErrors,
+  throwOnError,
   query,
 }: {
   result: QueryObserverResult<TData, TError>
   errorResetBoundary: QueryErrorResetBoundaryValue
-  throwErrors: ThrowErrors<TQueryFnData, TError, TQueryData, TQueryKey>
+  throwOnError: ThrowOnError<TQueryFnData, TError, TQueryData, TQueryKey>
   query: Query<TQueryFnData, TError, TQueryData, TQueryKey>
 }) => {
   return (
     result.isError &&
     !errorResetBoundary.isReset() &&
     !result.isFetching &&
-    shouldThrowError(throwErrors, [result.error, query])
+    shouldThrowError(throwOnError, [result.error, query])
   )
 }

package/src/index.ts

@@ -8,6 +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,

package/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
+}

package/src/queryOptions.ts

@@ -0,0 +1,42 @@
+import type { DefaultError, QueryKey } from '@tanstack/query-core'
+import type { UseQueryOptions } from './types'
+
+export type UndefinedInitialDataOptions<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+> = UseQueryOptions<TQueryFnData, TError, TData, TQueryKey> & {
+  initialData?: undefined
+}
+
+export type DefinedInitialDataOptions<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+> = UseQueryOptions<TQueryFnData, TError, TData, TQueryKey> & {
+  initialData: TQueryFnData | (() => TQueryFnData)
+}
+
+export function queryOptions<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  options: UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
+): UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>
+
+export function queryOptions<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  options: DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
+): DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>
+
+export function queryOptions(options: unknown) {
+  return options
+}

package/src/suspense.ts

@@ -1,8 +1,10 @@
-import type { DefaultedQueryObserverOptions } from '@tanstack/query-core'
-import type { QueryObserver } from '@tanstack/query-core'
+import type {
+  DefaultedQueryObserverOptions,
+  QueryKey,
+  QueryObserver,
+  QueryObserverResult,
+} from '@tanstack/query-core'
 import type { QueryErrorResetBoundaryValue } from './QueryErrorResetBoundary'
-import type { QueryObserverResult } from '@tanstack/query-core'
-import type { QueryKey } from '@tanstack/query-core'
 
 export const ensureStaleTime = (
   defaultedOptions: DefaultedQueryObserverOptions<any, any, any, any, any>,
@@ -46,14 +48,6 @@ export const fetchOptimistic = <
   observer: QueryObserver<TQueryFnData, TError, TData, TQueryData, TQueryKey>,
   errorResetBoundary: QueryErrorResetBoundaryValue,
 ) =>
-  observer
-    .fetchOptimistic(defaultedOptions)
-    .then(({ data }) => {
-      defaultedOptions.onSuccess?.(data as TData)
-      defaultedOptions.onSettled?.(data, null)
-    })
-    .catch((error) => {
-      errorResetBoundary.clearReset()
-      defaultedOptions.onError?.(error)
-      defaultedOptions.onSettled?.(undefined, error)
-    })
+  observer.fetchOptimistic(defaultedOptions).catch(() => {
+    errorResetBoundary.clearReset()
+  })

package/src/types.ts

@@ -1,17 +1,20 @@
 /* istanbul ignore file */
 
 import type {
+  DefaultError,
+  DefinedInfiniteQueryObserverResult,
+  DefinedQueryObserverResult,
   InfiniteQueryObserverOptions,
   InfiniteQueryObserverResult,
+  InfiniteQueryObserverSuccessResult,
+  MutateFunction,
+  MutationObserverOptions,
   MutationObserverResult,
+  QueryKey,
   QueryObserverOptions,
   QueryObserverResult,
-  QueryKey,
-  MutationObserverOptions,
-  MutateFunction,
-  DefinedQueryObserverResult,
+  QueryObserverSuccessResult,
   WithRequired,
-  DefaultError,
 } from '@tanstack/query-core'
 
 export interface UseBaseQueryOptions<
@@ -35,6 +38,16 @@ export interface UseQueryOptions<
     'queryKey'
   > {}
 
+export interface UseSuspenseQueryOptions<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+> extends Omit<
+    UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+    'enabled' | 'suspense' | 'throwOnError' | 'placeholderData'
+  > {}
+
 export interface UseInfiniteQueryOptions<
   TQueryFnData = unknown,
   TError = DefaultError,
@@ -54,6 +67,25 @@ export interface UseInfiniteQueryOptions<
     'queryKey'
   > {}
 
+export interface UseSuspenseInfiniteQueryOptions<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+  TPageParam = unknown,
+> extends Omit<
+    UseInfiniteQueryOptions<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryData,
+      TQueryKey,
+      TPageParam
+    >,
+    'enabled' | 'suspense' | 'throwOnError' | 'placeholderData'
+  > {}
+
 export type UseBaseQueryResult<
   TData = unknown,
   TError = DefaultError,
@@ -64,21 +96,31 @@ export type UseQueryResult<
   TError = DefaultError,
 > = UseBaseQueryResult<TData, TError>
 
-export type DefinedUseBaseQueryResult<
+export type UseSuspenseQueryResult<
   TData = unknown,
   TError = DefaultError,
-> = DefinedQueryObserverResult<TData, TError>
+> = Omit<QueryObserverSuccessResult<TData, TError>, 'isPlaceholderData'>
 
 export type DefinedUseQueryResult<
   TData = unknown,
   TError = DefaultError,
-> = DefinedUseBaseQueryResult<TData, TError>
+> = DefinedQueryObserverResult<TData, TError>
 
 export type UseInfiniteQueryResult<
   TData = unknown,
   TError = DefaultError,
 > = InfiniteQueryObserverResult<TData, TError>
 
+export type DefinedUseInfiniteQueryResult<
+  TData = unknown,
+  TError = DefaultError,
+> = DefinedInfiniteQueryObserverResult<TData, TError>
+
+export type UseSuspenseInfiniteQueryResult<
+  TData = unknown,
+  TError = DefaultError,
+> = Omit<InfiniteQueryObserverSuccessResult<TData, TError>, 'isPlaceholderData'>
+
 export interface UseMutationOptions<
   TData = unknown,
   TError = DefaultError,

package/src/useBaseQuery.ts

@@ -1,18 +1,18 @@
 'use client'
 import * as React from 'react'
 
-import type { QueryClient, QueryKey, QueryObserver } from '@tanstack/query-core'
 import { notifyManager } from '@tanstack/query-core'
 import { useQueryErrorResetBoundary } from './QueryErrorResetBoundary'
 import { useQueryClient } from './QueryClientProvider'
-import type { UseBaseQueryOptions } from './types'
 import { useIsRestoring } from './isRestoring'
 import {
   ensurePreventErrorBoundaryRetry,
   getHasError,
   useClearResetErrorBoundary,
 } from './errorBoundaryUtils'
-import { ensureStaleTime, shouldSuspend, fetchOptimistic } from './suspense'
+import { ensureStaleTime, fetchOptimistic, shouldSuspend } from './suspense'
+import type { UseBaseQueryOptions } from './types'
+import type { QueryClient, QueryKey, QueryObserver } from '@tanstack/query-core'
 
 export function useBaseQuery<
   TQueryFnData,
@@ -41,25 +41,6 @@ export function useBaseQuery<
     ? 'isRestoring'
     : 'optimistic'
 
-  // Include callbacks in batch renders
-  if (defaultedOptions.onError) {
-    defaultedOptions.onError = notifyManager.batchCalls(
-      defaultedOptions.onError,
-    )
-  }
-
-  if (defaultedOptions.onSuccess) {
-    defaultedOptions.onSuccess = notifyManager.batchCalls(
-      defaultedOptions.onSuccess,
-    )
-  }
-
-  if (defaultedOptions.onSettled) {
-    defaultedOptions.onSettled = notifyManager.batchCalls(
-      defaultedOptions.onSettled,
-    )
-  }
-
   ensureStaleTime(defaultedOptions)
   ensurePreventErrorBoundaryRetry(defaultedOptions, errorResetBoundary)
 
@@ -77,10 +58,17 @@ export function useBaseQuery<
 
   React.useSyncExternalStore(
     React.useCallback(
-      (onStoreChange) =>
-        isRestoring
+      (onStoreChange) => {
+        const unsubscribe = isRestoring
           ? () => undefined
-          : observer.subscribe(notifyManager.batchCalls(onStoreChange)),
+          : observer.subscribe(notifyManager.batchCalls(onStoreChange))
+
+        // Update result to make sure we did not miss any query updates
+        // between creating the observer and subscribing to it.
+        observer.updateResult()
+
+        return unsubscribe
+      },
       [observer, isRestoring],
     ),
     () => observer.getCurrentResult(),
@@ -103,7 +91,7 @@ export function useBaseQuery<
     getHasError({
       result,
       errorResetBoundary,
-      throwErrors: defaultedOptions.throwErrors,
+      throwOnError: defaultedOptions.throwOnError,
       query: observer.getCurrentQuery(),
     })
   ) {

package/src/useInfiniteQuery.ts

@@ -1,16 +1,59 @@
 'use client'
+import { InfiniteQueryObserver } from '@tanstack/query-core'
+import { useBaseQuery } from './useBaseQuery'
 import type {
-  QueryObserver,
-  QueryKey,
-  QueryClient,
   DefaultError,
   InfiniteData,
+  QueryClient,
+  QueryKey,
+  QueryObserver,
 } from '@tanstack/query-core'
-import { InfiniteQueryObserver } from '@tanstack/query-core'
-import type { UseInfiniteQueryOptions, UseInfiniteQueryResult } from './types'
-import { useBaseQuery } from './useBaseQuery'
+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,

package/src/useIsFetching.ts

@@ -1,9 +1,9 @@
 'use client'
 import * as React from 'react'
-import type { QueryClient, QueryFilters } from '@tanstack/query-core'
 import { notifyManager } from '@tanstack/query-core'
 
 import { useQueryClient } from './QueryClientProvider'
+import type { QueryClient, QueryFilters } from '@tanstack/query-core'
 
 export function useIsFetching(
   filters?: QueryFilters,

package/src/useMutation.ts

@@ -1,14 +1,14 @@
 'use client'
 import * as React from 'react'
-import type { QueryClient, DefaultError } from '@tanstack/query-core'
-import { notifyManager, MutationObserver } from '@tanstack/query-core'
+import { MutationObserver, notifyManager } from '@tanstack/query-core'
 import { useQueryClient } from './QueryClientProvider'
+import { shouldThrowError } from './utils'
 import type {
   UseMutateFunction,
   UseMutationOptions,
   UseMutationResult,
 } from './types'
-import { shouldThrowError } from './utils'
+import type { DefaultError, QueryClient } from '@tanstack/query-core'
 
 // HOOK
 
@@ -56,7 +56,7 @@ export function useMutation<
 
   if (
     result.error &&
-    shouldThrowError(observer.options.throwErrors, [result.error])
+    shouldThrowError(observer.options.throwOnError, [result.error])
   ) {
     throw result.error
   }

package/src/useMutationState.ts

@@ -1,16 +1,16 @@
 'use client'
 import * as React from 'react'
 
+import { notifyManager, replaceEqualDeep } from '@tanstack/query-core'
+import { useQueryClient } from './QueryClientProvider'
 import type {
-  MutationFilters,
-  QueryClient,
+  DefaultError,
   Mutation,
   MutationCache,
-  DefaultError,
+  MutationFilters,
+  MutationState,
+  QueryClient,
 } from '@tanstack/query-core'
-import { notifyManager, replaceEqualDeep } from '@tanstack/query-core'
-import { useQueryClient } from './QueryClientProvider'
-import type { MutationState } from '@tanstack/query-core/build/lib/mutation'
 
 export function useIsMutating(
   filters?: MutationFilters,
@@ -23,7 +23,7 @@ export function useIsMutating(
   ).length
 }
 
-type MutationStateOptions<TResult> = {
+type MutationStateOptions<TResult = MutationState> = {
   filters?: MutationFilters
   select?: (
     mutation: Mutation<unknown, DefaultError, unknown, unknown>,
@@ -46,7 +46,7 @@ function getResult<TResult = MutationState>(
     )
 }
 
-export function useMutationState<TResult = unknown>(
+export function useMutationState<TResult = MutationState>(
   options: MutationStateOptions<TResult> = {},
   queryClient?: QueryClient,
 ): Array<TResult> {