@tanstack/react-query 5.0.0-alpha.3 → 5.0.0-alpha.31

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

@@ -46,14 +46,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 {
@@ -155,15 +156,17 @@ export type QueriesResults<
   : // Fallback
     UseQueryResult[]
 
-export function useQueries<T extends any[]>({
-  queries,
-  queryClient,
-}: {
-  queries: readonly [...QueriesOptions<T>]
-  queryClient?: QueryClient
-}): QueriesResults<T> {
+export function useQueries<T extends any[]>(
+  {
+    queries,
+  }: {
+    queries: readonly [...QueriesOptions<T>]
+  },
+  queryClient?: QueryClient,
+): QueriesResults<T> {
   const client = useQueryClient(queryClient)
   const isRestoring = useIsRestoring()
+  const errorResetBoundary = useQueryErrorResetBoundary()
 
   const defaultedQueries = React.useMemo(
     () =>
@@ -180,6 +183,13 @@ 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),
   )
@@ -204,15 +214,6 @@ export function useQueries<T extends any[]>({
     observer.setQueries(defaultedQueries, { listeners: false })
   }, [defaultedQueries, observer])
 
-  const errorResetBoundary = useQueryErrorResetBoundary()
-
-  defaultedQueries.forEach((query) => {
-    ensurePreventErrorBoundaryRetry(query, errorResetBoundary)
-    ensureStaleTime(query)
-  })
-
-  useClearResetErrorBoundary(errorResetBoundary)
-
   const shouldAtLeastOneSuspend = optimisticResult.some((result, index) =>
     shouldSuspend(defaultedQueries[index], result, isRestoring),
   )
@@ -236,14 +237,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]!,
       }),
   )
 

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 = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  options: UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
+): UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>
+
+export function queryOptions<
+  TQueryFnData = unknown,
+  TError = unknown,
+  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,