@tanstack/react-query 4.24.10 → 5.0.0-alpha.0

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

@@ -1,20 +1,13 @@
 import { useQuery } from '../useQuery'
-
-export type Equal<X, Y> = (<T>() => T extends X ? 1 : 2) extends <
-  T,
->() => T extends Y ? 1 : 2
-  ? true
-  : false
-
-export type Expect<T extends true> = T
-
-const doNotExecute = (_func: () => void) => true
+import type { Expect, Equal } from './utils'
+import { doNotExecute } from './utils'
 
 describe('initialData', () => {
   describe('Config object overload', () => {
     it('TData should always be defined when initialData is provided as an object', () => {
       doNotExecute(() => {
         const { data } = useQuery({
+          queryKey: ['key'],
           queryFn: () => {
             return {
               wow: true,
@@ -33,6 +26,7 @@ describe('initialData', () => {
     it('TData should always be defined when initialData is provided as a function which ALWAYS returns the data', () => {
       doNotExecute(() => {
         const { data } = useQuery({
+          queryKey: ['key'],
           queryFn: () => {
             return {
               wow: true,
@@ -51,6 +45,7 @@ describe('initialData', () => {
     it('TData should have undefined in the union when initialData is NOT provided', () => {
       doNotExecute(() => {
         const { data } = useQuery({
+          queryKey: ['key'],
           queryFn: () => {
             return {
               wow: true,
@@ -67,6 +62,7 @@ describe('initialData', () => {
     it('TData should have undefined in the union when initialData is provided as a function which can return undefined', () => {
       doNotExecute(() => {
         const { data } = useQuery({
+          queryKey: ['key'],
           queryFn: () => {
             return {
               wow: true,
@@ -85,7 +81,8 @@ describe('initialData', () => {
   describe('Query key overload', () => {
     it('TData should always be defined when initialData is provided', () => {
       doNotExecute(() => {
-        const { data } = useQuery(['key'], {
+        const { data } = useQuery({
+          queryKey: ['key'],
           queryFn: () => {
             return {
               wow: true,
@@ -103,7 +100,8 @@ describe('initialData', () => {
 
     it('TData should have undefined in the union when initialData is NOT provided', () => {
       doNotExecute(() => {
-        const { data } = useQuery(['key'], {
+        const { data } = useQuery({
+          queryKey: ['key'],
           queryFn: () => {
             return {
               wow: true,
@@ -121,19 +119,17 @@ describe('initialData', () => {
   describe('Query key and func', () => {
     it('TData should always be defined when initialData is provided', () => {
       doNotExecute(() => {
-        const { data } = useQuery(
-          ['key'],
-          () => {
+        const { data } = useQuery({
+          queryKey: ['key'],
+          queryFn: () => {
             return {
               wow: true,
             }
           },
-          {
-            initialData: {
-              wow: true,
-            },
+          initialData: {
+            wow: true,
           },
-        )
+        })
 
         const result: Expect<Equal<{ wow: boolean }, typeof data>> = true
         return result
@@ -142,10 +138,13 @@ describe('initialData', () => {
 
     it('TData should have undefined in the union when initialData is NOT provided', () => {
       doNotExecute(() => {
-        const { data } = useQuery(['key'], () => {
-          return {
-            wow: true,
-          }
+        const { data } = useQuery({
+          queryKey: ['key'],
+          queryFn: () => {
+            return {
+              wow: true,
+            }
+          },
         })
 
         const result: Expect<Equal<{ wow: boolean } | undefined, typeof data>> =

package/src/__tests__/utils.tsx

@@ -1,26 +1,21 @@
 import * as React from 'react'
 import { act, render } from '@testing-library/react'
-import type { ContextOptions, QueryClientConfig, MutationOptions } from '..'
+import type { QueryClientConfig } from '..'
 import { QueryClient, QueryClientProvider } from '..'
 import * as utils from '@tanstack/query-core'
 
 export function renderWithClient(
   client: QueryClient,
   ui: React.ReactElement,
-  options: ContextOptions = {},
 ): ReturnType<typeof render> {
   const { rerender, ...result } = render(
-    <QueryClientProvider client={client} context={options.context}>
-      {ui}
-    </QueryClientProvider>,
+    <QueryClientProvider client={client}>{ui}</QueryClientProvider>,
   )
   return {
     ...result,
     rerender: (rerenderUi: React.ReactElement) =>
       rerender(
-        <QueryClientProvider client={client} context={options.context}>
-          {rerenderUi}
-        </QueryClientProvider>,
+        <QueryClientProvider client={client}>{rerenderUi}</QueryClientProvider>,
       ),
   } as any
 }
@@ -46,8 +41,7 @@ export const Blink = ({
 }
 
 export function createQueryClient(config?: QueryClientConfig): QueryClient {
-  jest.spyOn(console, 'error').mockImplementation(() => undefined)
-  return new QueryClient({ logger: mockLogger, ...config })
+  return new QueryClient(config)
 }
 
 export function mockVisibilityState(value: DocumentVisibilityState) {
@@ -58,12 +52,6 @@ export function mockNavigatorOnLine(value: boolean) {
   return jest.spyOn(navigator, 'onLine', 'get').mockReturnValue(value)
 }
 
-export const mockLogger = {
-  log: jest.fn(),
-  warn: jest.fn(),
-  error: jest.fn(),
-}
-
 let queryKeyCount = 0
 export function queryKey(): Array<string> {
   queryKeyCount++
@@ -91,6 +79,14 @@ export function expectType<T>(_: T): void {
   return undefined
 }
 
+export type Equal<X, Y> = (<T>() => T extends X ? 1 : 2) extends <
+  T,
+>() => T extends Y ? 1 : 2
+  ? true
+  : false
+
+export type Expect<T extends true> = T
+
 /**
  * Assert the parameter is not typed as `any`
  */
@@ -98,13 +94,6 @@ export function expectTypeNotAny<T>(_: 0 extends 1 & T ? never : T): void {
   return undefined
 }
 
-export function executeMutation(
-  queryClient: QueryClient,
-  options: MutationOptions<any, any, any, any>,
-): Promise<unknown> {
-  return queryClient.getMutationCache().build(queryClient, options).execute()
-}
-
 // This monkey-patches the isServer-value from utils,
 // so that we can pretend to be in a server environment
 export function setIsServer(isServer: boolean) {
@@ -119,3 +108,5 @@ export function setIsServer(isServer: boolean) {
     })
   }
 }
+
+export const doNotExecute = (_func: () => void) => true

package/src/errorBoundaryUtils.ts

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

package/src/index.ts

@@ -1,8 +1,5 @@
 /* istanbul ignore file */
 
-// Side effects
-import './setBatchUpdatesFn'
-
 // Re-export core
 export * from '@tanstack/query-core'
 
@@ -12,20 +9,20 @@ export { useQueries } from './useQueries'
 export type { QueriesResults, QueriesOptions } from './useQueries'
 export { useQuery } from './useQuery'
 export {
-  defaultContext,
+  QueryClientContext,
   QueryClientProvider,
   useQueryClient,
 } from './QueryClientProvider'
 export type { QueryClientProviderProps } from './QueryClientProvider'
 export type { QueryErrorResetBoundaryProps } from './QueryErrorResetBoundary'
-export { useHydrate, Hydrate } from './Hydrate'
-export type { HydrateProps } from './Hydrate'
+export { HydrationBoundary } from './HydrationBoundary'
+export type { HydrationBoundaryProps } from './HydrationBoundary'
 export {
   QueryErrorResetBoundary,
   useQueryErrorResetBoundary,
 } from './QueryErrorResetBoundary'
 export { useIsFetching } from './useIsFetching'
-export { useIsMutating } from './useIsMutating'
+export { useIsMutating, useMutationState } from './useMutationState'
 export { useMutation } from './useMutation'
 export { useInfiniteQuery } from './useInfiniteQuery'
 export { useIsRestoring, IsRestoringProvider } from './isRestoring'

package/src/types.ts

@@ -1,6 +1,5 @@
 /* istanbul ignore file */
 
-import type * as React from 'react'
 import type {
   InfiniteQueryObserverOptions,
   InfiniteQueryObserverResult,
@@ -11,92 +10,88 @@ import type {
   MutationObserverOptions,
   MutateFunction,
   DefinedQueryObserverResult,
+  WithRequired,
+  RegisteredError,
 } from '@tanstack/query-core'
-import type { QueryClient } from '@tanstack/query-core'
-
-export interface ContextOptions {
-  /**
-   * Use this to pass your React Query context. Otherwise, `defaultContext` will be used.
-   */
-  context?: React.Context<QueryClient | undefined>
-}
 
 export interface UseBaseQueryOptions<
   TQueryFnData = unknown,
-  TError = unknown,
+  TError = RegisteredError,
   TData = TQueryFnData,
   TQueryData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey,
-> extends ContextOptions,
-    QueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey> {}
+> extends WithRequired<
+    QueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>,
+    'queryKey'
+  > {}
 
 export interface UseQueryOptions<
   TQueryFnData = unknown,
-  TError = unknown,
+  TError = RegisteredError,
   TData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey,
-> extends UseBaseQueryOptions<
-    TQueryFnData,
-    TError,
-    TData,
-    TQueryFnData,
-    TQueryKey
+> extends WithRequired<
+    UseBaseQueryOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey>,
+    'queryKey'
   > {}
 
 export interface UseInfiniteQueryOptions<
   TQueryFnData = unknown,
-  TError = unknown,
+  TError = RegisteredError,
   TData = TQueryFnData,
   TQueryData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey,
-> extends ContextOptions,
+  TPageParam = unknown,
+> extends WithRequired<
     InfiniteQueryObserverOptions<
       TQueryFnData,
       TError,
       TData,
       TQueryData,
-      TQueryKey
-    > {}
+      TQueryKey,
+      TPageParam
+    >,
+    'queryKey'
+  > {}
 
 export type UseBaseQueryResult<
   TData = unknown,
-  TError = unknown,
+  TError = RegisteredError,
 > = QueryObserverResult<TData, TError>
 
 export type UseQueryResult<
   TData = unknown,
-  TError = unknown,
+  TError = RegisteredError,
 > = UseBaseQueryResult<TData, TError>
 
 export type DefinedUseBaseQueryResult<
   TData = unknown,
-  TError = unknown,
+  TError = RegisteredError,
 > = DefinedQueryObserverResult<TData, TError>
 
 export type DefinedUseQueryResult<
   TData = unknown,
-  TError = unknown,
+  TError = RegisteredError,
 > = DefinedUseBaseQueryResult<TData, TError>
 
 export type UseInfiniteQueryResult<
   TData = unknown,
-  TError = unknown,
+  TError = RegisteredError,
 > = InfiniteQueryObserverResult<TData, TError>
 
 export interface UseMutationOptions<
   TData = unknown,
-  TError = unknown,
+  TError = RegisteredError,
   TVariables = void,
   TContext = unknown,
-> extends ContextOptions,
-    Omit<
-      MutationObserverOptions<TData, TError, TVariables, TContext>,
-      '_defaulted' | 'variables'
-    > {}
+> extends Omit<
+    MutationObserverOptions<TData, TError, TVariables, TContext>,
+    '_defaulted' | 'variables'
+  > {}
 
 export type UseMutateFunction<
   TData = unknown,
-  TError = unknown,
+  TError = RegisteredError,
   TVariables = void,
   TContext = unknown,
 > = (
@@ -105,14 +100,14 @@ export type UseMutateFunction<
 
 export type UseMutateAsyncFunction<
   TData = unknown,
-  TError = unknown,
+  TError = RegisteredError,
   TVariables = void,
   TContext = unknown,
 > = MutateFunction<TData, TError, TVariables, TContext>
 
 export type UseBaseMutationResult<
   TData = unknown,
-  TError = unknown,
+  TError = RegisteredError,
   TVariables = unknown,
   TContext = unknown,
 > = Override<
@@ -122,7 +117,7 @@ export type UseBaseMutationResult<
 
 export type UseMutationResult<
   TData = unknown,
-  TError = unknown,
+  TError = RegisteredError,
   TVariables = unknown,
   TContext = unknown,
 > = UseBaseMutationResult<TData, TError, TVariables, TContext>

package/src/useBaseQuery.ts

@@ -1,7 +1,6 @@
 import * as React from 'react'
-import { useSyncExternalStore } from './useSyncExternalStore'
 
-import type { QueryKey, QueryObserver } from '@tanstack/query-core'
+import type { QueryClient, QueryKey, QueryObserver } from '@tanstack/query-core'
 import { notifyManager } from '@tanstack/query-core'
 import { useQueryErrorResetBoundary } from './QueryErrorResetBoundary'
 import { useQueryClient } from './QueryClientProvider'
@@ -29,11 +28,12 @@ export function useBaseQuery<
     TQueryKey
   >,
   Observer: typeof QueryObserver,
+  queryClient?: QueryClient,
 ) {
-  const queryClient = useQueryClient({ context: options.context })
+  const client = useQueryClient(queryClient)
   const isRestoring = useIsRestoring()
   const errorResetBoundary = useQueryErrorResetBoundary()
-  const defaultedOptions = queryClient.defaultQueryOptions(options)
+  const defaultedOptions = client.defaultQueryOptions(options)
 
   // Make sure results are optimistically set in fetching state before subscribing or updating options
   defaultedOptions._optimisticResults = isRestoring
@@ -67,14 +67,14 @@ export function useBaseQuery<
   const [observer] = React.useState(
     () =>
       new Observer<TQueryFnData, TError, TData, TQueryData, TQueryKey>(
-        queryClient,
+        client,
         defaultedOptions,
       ),
   )
 
   const result = observer.getOptimisticResult(defaultedOptions)
 
-  useSyncExternalStore(
+  React.useSyncExternalStore(
     React.useCallback(
       (onStoreChange) =>
         isRestoring
@@ -102,7 +102,7 @@ export function useBaseQuery<
     getHasError({
       result,
       errorResetBoundary,
-      useErrorBoundary: defaultedOptions.useErrorBoundary,
+      throwErrors: defaultedOptions.throwErrors,
       query: observer.getCurrentQuery(),
     })
   ) {

package/src/useInfiniteQuery.ts

@@ -1,100 +1,35 @@
 import type {
   QueryObserver,
-  QueryFunction,
   QueryKey,
+  QueryClient,
+  RegisteredError,
+  InfiniteData,
 } from '@tanstack/query-core'
-import { InfiniteQueryObserver, parseQueryArgs } from '@tanstack/query-core'
+import { InfiniteQueryObserver } from '@tanstack/query-core'
 import type { UseInfiniteQueryOptions, UseInfiniteQueryResult } from './types'
 import { useBaseQuery } from './useBaseQuery'
 
 // HOOK
-
-export function useInfiniteQuery<
-  TQueryFnData = unknown,
-  TError = unknown,
-  TData = TQueryFnData,
-  TQueryKey extends QueryKey = QueryKey,
->(
-  options: UseInfiniteQueryOptions<
-    TQueryFnData,
-    TError,
-    TData,
-    TQueryFnData,
-    TQueryKey
-  >,
-): UseInfiniteQueryResult<TData, TError>
-export function useInfiniteQuery<
-  TQueryFnData = unknown,
-  TError = unknown,
-  TData = TQueryFnData,
-  TQueryKey extends QueryKey = QueryKey,
->(
-  queryKey: TQueryKey,
-  options?: Omit<
-    UseInfiniteQueryOptions<
-      TQueryFnData,
-      TError,
-      TData,
-      TQueryFnData,
-      TQueryKey
-    >,
-    'queryKey'
-  >,
-): UseInfiniteQueryResult<TData, TError>
-export function useInfiniteQuery<
-  TQueryFnData = unknown,
-  TError = unknown,
-  TData = TQueryFnData,
-  TQueryKey extends QueryKey = QueryKey,
->(
-  queryKey: TQueryKey,
-  queryFn: QueryFunction<TQueryFnData, TQueryKey>,
-  options?: Omit<
-    UseInfiniteQueryOptions<
-      TQueryFnData,
-      TError,
-      TData,
-      TQueryFnData,
-      TQueryKey
-    >,
-    'queryKey' | 'queryFn'
-  >,
-): UseInfiniteQueryResult<TData, TError>
 export function useInfiniteQuery<
   TQueryFnData,
-  TError,
-  TData = TQueryFnData,
+  TError = RegisteredError,
+  TData = InfiniteData<TQueryFnData>,
   TQueryKey extends QueryKey = QueryKey,
+  TPageParam = unknown,
 >(
-  arg1:
-    | TQueryKey
-    | UseInfiniteQueryOptions<
-        TQueryFnData,
-        TError,
-        TData,
-        TQueryFnData,
-        TQueryKey
-      >,
-  arg2?:
-    | QueryFunction<TQueryFnData, TQueryKey>
-    | UseInfiniteQueryOptions<
-        TQueryFnData,
-        TError,
-        TData,
-        TQueryFnData,
-        TQueryKey
-      >,
-  arg3?: UseInfiniteQueryOptions<
+  options: UseInfiniteQueryOptions<
     TQueryFnData,
     TError,
     TData,
     TQueryFnData,
-    TQueryKey
+    TQueryKey,
+    TPageParam
   >,
+  queryClient?: QueryClient,
 ): UseInfiniteQueryResult<TData, TError> {
-  const options = parseQueryArgs(arg1, arg2, arg3)
   return useBaseQuery(
     options,
     InfiniteQueryObserver as typeof QueryObserver,
+    queryClient,
   ) as UseInfiniteQueryResult<TData, TError>
 }

package/src/useIsFetching.ts

@@ -1,35 +1,23 @@
 import * as React from 'react'
-import type { QueryKey, QueryFilters } from '@tanstack/query-core'
-import { notifyManager, parseFilterArgs } from '@tanstack/query-core'
+import type { QueryClient, QueryFilters } from '@tanstack/query-core'
+import { notifyManager } from '@tanstack/query-core'
 
-import { useSyncExternalStore } from './useSyncExternalStore'
-import type { ContextOptions } from './types'
 import { useQueryClient } from './QueryClientProvider'
 
-interface Options extends ContextOptions {}
-
-export function useIsFetching(filters?: QueryFilters, options?: Options): number
 export function useIsFetching(
-  queryKey?: QueryKey,
   filters?: QueryFilters,
-  options?: Options,
-): number
-export function useIsFetching(
-  arg1?: QueryKey | QueryFilters,
-  arg2?: QueryFilters | Options,
-  arg3?: Options,
+  queryClient?: QueryClient,
 ): number {
-  const [filters, options = {}] = parseFilterArgs(arg1, arg2, arg3)
-  const queryClient = useQueryClient({ context: options.context })
-  const queryCache = queryClient.getQueryCache()
+  const client = useQueryClient(queryClient)
+  const queryCache = client.getQueryCache()
 
-  return useSyncExternalStore(
+  return React.useSyncExternalStore(
     React.useCallback(
       (onStoreChange) =>
         queryCache.subscribe(notifyManager.batchCalls(onStoreChange)),
       [queryCache],
     ),
-    () => queryClient.isFetching(filters),
-    () => queryClient.isFetching(filters),
+    () => client.isFetching(filters),
+    () => client.isFetching(filters),
   )
 }