@tanstack/react-query 5.0.0-alpha.4 → 5.0.0-alpha.42

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

@@ -1,4 +1,4 @@
-import { useQuery } from '../useQuery'
+import { queryOptions, useQuery } from '../useQuery'
 import type { Expect, Equal } from './utils'
 import { doNotExecute } from './utils'
 
@@ -23,6 +23,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

@@ -3,6 +3,7 @@ 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'
 
 export function renderWithClient(
   client: QueryClient,
@@ -45,11 +46,11 @@ export function createQueryClient(config?: QueryClientConfig): QueryClient {
 }
 
 export function mockVisibilityState(value: DocumentVisibilityState) {
-  return jest.spyOn(document, 'visibilityState', 'get').mockReturnValue(value)
+  return vi.spyOn(document, 'visibilityState', 'get').mockReturnValue(value)
 }
 
 export function mockNavigatorOnLine(value: boolean) {
-  return jest.spyOn(navigator, 'onLine', 'get').mockReturnValue(value)
+  return vi.spyOn(navigator, 'onLine', 'get').mockReturnValue(value)
 }
 
 let queryKeyCount = 0

package/src/errorBoundaryUtils.ts

@@ -1,9 +1,10 @@
+'use client'
 import type {
   DefaultedQueryObserverOptions,
   Query,
   QueryKey,
   QueryObserverResult,
-  ThrowErrors,
+  ThrowOnError,
 } from '@tanstack/query-core'
 import type { QueryErrorResetBoundaryValue } from './QueryErrorResetBoundary'
 import * as React from 'react'
@@ -25,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
@@ -50,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

@@ -7,7 +7,7 @@ export * from '@tanstack/query-core'
 export * from './types'
 export { useQueries } from './useQueries'
 export type { QueriesResults, QueriesOptions } from './useQueries'
-export { useQuery } from './useQuery'
+export { useQuery, queryOptions } from './useQuery'
 export {
   QueryClientContext,
   QueryClientProvider,

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,
+  QueryObserverResult,
+  QueryKey,
+  QueryObserver,
+} 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/useBaseQuery.ts

@@ -1,3 +1,4 @@
+'use client'
 import * as React from 'react'
 
 import type { QueryClient, QueryKey, QueryObserver } from '@tanstack/query-core'
@@ -40,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)
 
@@ -102,7 +84,7 @@ export function useBaseQuery<
     getHasError({
       result,
       errorResetBoundary,
-      throwErrors: defaultedOptions.throwErrors,
+      throwOnError: defaultedOptions.throwOnError,
       query: observer.getCurrentQuery(),
     })
   ) {

package/src/useInfiniteQuery.ts

@@ -1,3 +1,4 @@
+'use client'
 import type {
   QueryObserver,
   QueryKey,

package/src/useIsFetching.ts

@@ -1,3 +1,4 @@
+'use client'
 import * as React from 'react'
 import type { QueryClient, QueryFilters } from '@tanstack/query-core'
 import { notifyManager } from '@tanstack/query-core'

package/src/useMutation.ts

@@ -1,3 +1,4 @@
+'use client'
 import * as React from 'react'
 import type { QueryClient, DefaultError } from '@tanstack/query-core'
 import { notifyManager, MutationObserver } from '@tanstack/query-core'
@@ -55,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,3 +1,4 @@
+'use client'
 import * as React from 'react'
 
 import type {
@@ -6,10 +7,10 @@ import type {
   Mutation,
   MutationCache,
   DefaultError,
+  MutationState,
 } 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,
@@ -22,7 +23,7 @@ export function useIsMutating(
   ).length
 }
 
-type MutationStateOptions<TResult> = {
+type MutationStateOptions<TResult = MutationState> = {
   filters?: MutationFilters
   select?: (
     mutation: Mutation<unknown, DefaultError, unknown, unknown>,
@@ -45,7 +46,7 @@ function getResult<TResult = MutationState>(
     )
 }
 
-export function useMutationState<TResult = unknown>(
+export function useMutationState<TResult = MutationState>(
   options: MutationStateOptions<TResult> = {},
   queryClient?: QueryClient,
 ): Array<TResult> {

package/src/useQueries.ts

@@ -1,3 +1,4 @@
+'use client'
 import * as React from 'react'
 
 import type {
@@ -6,6 +7,7 @@ import type {
   QueriesPlaceholderDataFunction,
   QueryClient,
   DefaultError,
+  QueriesObserverOptions,
 } from '@tanstack/query-core'
 import { notifyManager, QueriesObserver } from '@tanstack/query-core'
 import { useQueryClient } from './QueryClientProvider'
@@ -155,21 +157,27 @@ export type QueriesResults<
   : // Fallback
     UseQueryResult[]
 
-export function useQueries<T extends any[]>(
+export function useQueries<
+  T extends any[],
+  TCombinedResult = QueriesResults<T>,
+>(
   {
     queries,
+    ...options
   }: {
     queries: readonly [...QueriesOptions<T>]
+    combine?: (result: QueriesResults<T>) => TCombinedResult
   },
   queryClient?: QueryClient,
-): QueriesResults<T> {
+): TCombinedResult {
   const client = useQueryClient(queryClient)
   const isRestoring = useIsRestoring()
+  const errorResetBoundary = useQueryErrorResetBoundary()
 
   const defaultedQueries = React.useMemo(
     () =>
-      queries.map((options) => {
-        const defaultedOptions = client.defaultQueryOptions(options)
+      queries.map((opts) => {
+        const defaultedOptions = client.defaultQueryOptions(opts)
 
         // Make sure the results are already in fetching state before subscribing or updating options
         defaultedOptions._optimisticResults = isRestoring
@@ -181,11 +189,24 @@ export function useQueries<T extends any[]>(
     [queries, client, isRestoring],
   )
 
+  defaultedQueries.forEach((query) => {
+    ensureStaleTime(query)
+    ensurePreventErrorBoundaryRetry(query, errorResetBoundary)
+  })
+
+  useClearResetErrorBoundary(errorResetBoundary)
+
   const [observer] = React.useState(
-    () => new QueriesObserver(client, defaultedQueries),
+    () =>
+      new QueriesObserver<TCombinedResult>(
+        client,
+        defaultedQueries,
+        options as QueriesObserverOptions<TCombinedResult>,
+      ),
   )
 
-  const optimisticResult = observer.getOptimisticResult(defaultedQueries)
+  const [optimisticResult, getCombinedResult, trackResult] =
+    observer.getOptimisticResult(defaultedQueries)
 
   React.useSyncExternalStore(
     React.useCallback(
@@ -202,17 +223,14 @@ export function useQueries<T extends any[]>(
   React.useEffect(() => {
     // Do not notify on updates because of changes in the options because
     // these changes should already be reflected in the optimistic result.
-    observer.setQueries(defaultedQueries, { listeners: false })
-  }, [defaultedQueries, observer])
-
-  const errorResetBoundary = useQueryErrorResetBoundary()
-
-  defaultedQueries.forEach((query) => {
-    ensurePreventErrorBoundaryRetry(query, errorResetBoundary)
-    ensureStaleTime(query)
-  })
-
-  useClearResetErrorBoundary(errorResetBoundary)
+    observer.setQueries(
+      defaultedQueries,
+      options as QueriesObserverOptions<TCombinedResult>,
+      {
+        listeners: false,
+      },
+    )
+  }, [defaultedQueries, options, observer])
 
   const shouldAtLeastOneSuspend = optimisticResult.some((result, index) =>
     shouldSuspend(defaultedQueries[index], result, isRestoring),
@@ -220,14 +238,14 @@ export function useQueries<T extends any[]>(
 
   const suspensePromises = shouldAtLeastOneSuspend
     ? optimisticResult.flatMap((result, index) => {
-        const options = defaultedQueries[index]
+        const opts = defaultedQueries[index]
         const queryObserver = observer.getObservers()[index]
 
-        if (options && queryObserver) {
-          if (shouldSuspend(options, result, isRestoring)) {
-            return fetchOptimistic(options, queryObserver, errorResetBoundary)
+        if (opts && queryObserver) {
+          if (shouldSuspend(opts, result, isRestoring)) {
+            return fetchOptimistic(opts, queryObserver, errorResetBoundary)
           } else if (willFetch(result, isRestoring)) {
-            void fetchOptimistic(options, queryObserver, errorResetBoundary)
+            void fetchOptimistic(opts, queryObserver, errorResetBoundary)
           }
         }
         return []
@@ -237,14 +255,14 @@ export function useQueries<T extends any[]>(
   if (suspensePromises.length > 0) {
     throw Promise.all(suspensePromises)
   }
-
+  const observerQueries = observer.getQueries()
   const firstSingleResultWhichShouldThrow = optimisticResult.find(
     (result, index) =>
       getHasError({
         result,
         errorResetBoundary,
-        throwErrors: defaultedQueries[index]?.throwErrors ?? false,
-        query: observer.getQueries()[index]!,
+        throwOnError: defaultedQueries[index]?.throwOnError ?? false,
+        query: observerQueries[index]!,
       }),
   )
 
@@ -252,5 +270,5 @@ export function useQueries<T extends any[]>(
     throw firstSingleResultWhichShouldThrow.error
   }
 
-  return optimisticResult as QueriesResults<T>
+  return getCombinedResult(trackResult())
 }

package/src/useQuery.ts

@@ -1,3 +1,4 @@
+'use client'
 import type { QueryClient, QueryKey, DefaultError } from '@tanstack/query-core'
 import { QueryObserver } from '@tanstack/query-core'
 import type {
@@ -7,6 +8,28 @@ import type {
 } from './types'
 import { useBaseQuery } from './useBaseQuery'
 
+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
+}
+
 // HOOK
 type UndefinedInitialDataOptions<
   TQueryFnData = unknown,