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

package/src/query.ts

@@ -1,4 +1,4 @@
-import { getAbortController, noop, replaceData, timeUntilStale } from './utils'
+import { noop, replaceData, timeUntilStale } from './utils'
 import type {
   InitialDataFunction,
   QueryKey,
@@ -9,11 +9,10 @@ import type {
   CancelOptions,
   SetDataOptions,
   FetchStatus,
+  RegisteredError,
 } from './types'
 import type { QueryCache } from './queryCache'
 import type { QueryObserver } from './queryObserver'
-import type { Logger } from './logger'
-import { defaultLogger } from './logger'
 import { notifyManager } from './notifyManager'
 import type { Retryer } from './retryer'
 import { isCancelledError, canFetch, createRetryer } from './retryer'
@@ -30,13 +29,12 @@ interface QueryConfig<
   cache: QueryCache
   queryKey: TQueryKey
   queryHash: string
-  logger?: Logger
   options?: QueryOptions<TQueryFnData, TError, TData, TQueryKey>
   defaultOptions?: QueryOptions<TQueryFnData, TError, TData, TQueryKey>
   state?: QueryState<TData, TError>
 }
 
-export interface QueryState<TData = unknown, TError = unknown> {
+export interface QueryState<TData = unknown, TError = RegisteredError> {
   data: TData | undefined
   dataUpdateCount: number
   dataUpdatedAt: number
@@ -45,7 +43,7 @@ export interface QueryState<TData = unknown, TError = unknown> {
   errorUpdatedAt: number
   fetchFailureCount: number
   fetchFailureReason: TError | null
-  fetchMeta: any
+  fetchMeta: FetchMeta | null
   isInvalidated: boolean
   status: QueryStatus
   fetchStatus: FetchStatus
@@ -59,7 +57,7 @@ export interface FetchContext<
 > {
   fetchFn: () => unknown | Promise<unknown>
   fetchOptions?: FetchOptions
-  signal?: AbortSignal
+  signal: AbortSignal
   options: QueryOptions<TQueryFnData, TError, TData, any>
   queryKey: TQueryKey
   state: QueryState<TData, TError>
@@ -67,7 +65,7 @@ export interface FetchContext<
 
 export interface QueryBehavior<
   TQueryFnData = unknown,
-  TError = unknown,
+  TError = RegisteredError,
   TData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey,
 > {
@@ -76,9 +74,13 @@ export interface QueryBehavior<
   ) => void
 }
 
+export interface FetchMeta {
+  fetchMore?: { direction: 'forward' | 'backward' }
+}
+
 export interface FetchOptions {
   cancelRefetch?: boolean
-  meta?: any
+  meta?: FetchMeta
 }
 
 interface FailedAction<TError> {
@@ -89,7 +91,7 @@ interface FailedAction<TError> {
 
 interface FetchAction {
   type: 'fetch'
-  meta?: any
+  meta?: FetchMeta
 }
 
 interface SuccessAction<TData> {
@@ -140,57 +142,54 @@ export interface SetStateOptions {
 
 export class Query<
   TQueryFnData = unknown,
-  TError = unknown,
+  TError = RegisteredError,
   TData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey,
 > extends Removable {
   queryKey: TQueryKey
   queryHash: string
   options!: QueryOptions<TQueryFnData, TError, TData, TQueryKey>
-  initialState: QueryState<TData, TError>
-  revertState?: QueryState<TData, TError>
   state: QueryState<TData, TError>
   isFetchingOptimistic?: boolean
 
-  private cache: QueryCache
-  private logger: Logger
-  private promise?: Promise<TData>
-  private retryer?: Retryer<TData>
-  private observers: QueryObserver<any, any, any, any, any>[]
-  private defaultOptions?: QueryOptions<TQueryFnData, TError, TData, TQueryKey>
-  private abortSignalConsumed: boolean
+  #initialState: QueryState<TData, TError>
+  #revertState?: QueryState<TData, TError>
+  #cache: QueryCache
+  #promise?: Promise<TData>
+  #retryer?: Retryer<TData>
+  #observers: QueryObserver<any, any, any, any, any>[]
+  #defaultOptions?: QueryOptions<TQueryFnData, TError, TData, TQueryKey>
+  #abortSignalConsumed: boolean
 
   constructor(config: QueryConfig<TQueryFnData, TError, TData, TQueryKey>) {
     super()
 
-    this.abortSignalConsumed = false
-    this.defaultOptions = config.defaultOptions
-    this.setOptions(config.options)
-    this.observers = []
-    this.cache = config.cache
-    this.logger = config.logger || defaultLogger
+    this.#abortSignalConsumed = false
+    this.#defaultOptions = config.defaultOptions
+    this.#setOptions(config.options)
+    this.#observers = []
+    this.#cache = config.cache
     this.queryKey = config.queryKey
     this.queryHash = config.queryHash
-    this.initialState = config.state || getDefaultState(this.options)
-    this.state = this.initialState
+    this.#initialState = config.state || getDefaultState(this.options)
+    this.state = this.#initialState
     this.scheduleGc()
   }
-
   get meta(): QueryMeta | undefined {
     return this.options.meta
   }
 
-  private setOptions(
+  #setOptions(
     options?: QueryOptions<TQueryFnData, TError, TData, TQueryKey>,
   ): void {
-    this.options = { ...this.defaultOptions, ...options }
+    this.options = { ...this.#defaultOptions, ...options }
 
-    this.updateCacheTime(this.options.cacheTime)
+    this.updateGcTime(this.options.gcTime)
   }
 
   protected optionalRemove() {
-    if (!this.observers.length && this.state.fetchStatus === 'idle') {
-      this.cache.remove(this)
+    if (!this.#observers.length && this.state.fetchStatus === 'idle') {
+      this.#cache.remove(this)
     }
   }
 
@@ -201,7 +200,7 @@ export class Query<
     const data = replaceData(this.state.data, newData, this.options)
 
     // Set data and mark it as cached
-    this.dispatch({
+    this.#dispatch({
       data,
       type: 'success',
       dataUpdatedAt: options?.updatedAt,
@@ -215,12 +214,12 @@ export class Query<
     state: QueryState<TData, TError>,
     setStateOptions?: SetStateOptions,
   ): void {
-    this.dispatch({ type: 'setState', state, setStateOptions })
+    this.#dispatch({ type: 'setState', state, setStateOptions })
   }
 
   cancel(options?: CancelOptions): Promise<void> {
-    const promise = this.promise
-    this.retryer?.cancel(options)
+    const promise = this.#promise
+    this.#retryer?.cancel(options)
     return promise ? promise.then(noop).catch(noop) : Promise.resolve()
   }
 
@@ -232,11 +231,13 @@ export class Query<
 
   reset(): void {
     this.destroy()
-    this.setState(this.initialState)
+    this.setState(this.#initialState)
   }
 
   isActive(): boolean {
-    return this.observers.some((observer) => observer.options.enabled !== false)
+    return this.#observers.some(
+      (observer) => observer.options.enabled !== false,
+    )
   }
 
   isDisabled(): boolean {
@@ -247,7 +248,7 @@ export class Query<
     return (
       this.state.isInvalidated ||
       !this.state.dataUpdatedAt ||
-      this.observers.some((observer) => observer.getCurrentResult().isStale)
+      this.#observers.some((observer) => observer.getCurrentResult().isStale)
     )
   }
 
@@ -260,67 +261,63 @@ export class Query<
   }
 
   onFocus(): void {
-    const observer = this.observers.find((x) => x.shouldFetchOnWindowFocus())
+    const observer = this.#observers.find((x) => x.shouldFetchOnWindowFocus())
 
-    if (observer) {
-      observer.refetch({ cancelRefetch: false })
-    }
+    observer?.refetch({ cancelRefetch: false })
 
     // Continue fetch if currently paused
-    this.retryer?.continue()
+    this.#retryer?.continue()
   }
 
   onOnline(): void {
-    const observer = this.observers.find((x) => x.shouldFetchOnReconnect())
+    const observer = this.#observers.find((x) => x.shouldFetchOnReconnect())
 
-    if (observer) {
-      observer.refetch({ cancelRefetch: false })
-    }
+    observer?.refetch({ cancelRefetch: false })
 
     // Continue fetch if currently paused
-    this.retryer?.continue()
+    this.#retryer?.continue()
   }
 
   addObserver(observer: QueryObserver<any, any, any, any, any>): void {
-    if (this.observers.indexOf(observer) === -1) {
-      this.observers.push(observer)
+    if (this.#observers.indexOf(observer) === -1) {
+      this.#observers.push(observer)
 
       // Stop the query from being garbage collected
       this.clearGcTimeout()
 
-      this.cache.notify({ type: 'observerAdded', query: this, observer })
+      this.#cache.notify({ type: 'observerAdded', query: this, observer })
     }
   }
 
   removeObserver(observer: QueryObserver<any, any, any, any, any>): void {
-    if (this.observers.indexOf(observer) !== -1) {
-      this.observers = this.observers.filter((x) => x !== observer)
+    if (this.#observers.indexOf(observer) !== -1) {
+      this.#observers = this.#observers.filter((x) => x !== observer)
 
-      if (!this.observers.length) {
+      if (!this.#observers.length) {
         // If the transport layer does not support cancellation
         // we'll let the query continue so the result can be cached
-        if (this.retryer) {
-          if (this.abortSignalConsumed) {
-            this.retryer.cancel({ revert: true })
+        if (this.#retryer) {
+          if (this.#abortSignalConsumed) {
+            this.#retryer.cancel({ revert: true })
           } else {
-            this.retryer.cancelRetry()
+            this.#retryer.cancelRetry()
           }
         }
 
         this.scheduleGc()
       }
 
-      this.cache.notify({ type: 'observerRemoved', query: this, observer })
+      this.#cache.notify({ type: 'observerRemoved', query: this, observer })
     }
   }
 
   getObserversCount(): number {
-    return this.observers.length
+    return this.#observers.length
   }
 
   invalidate(): void {
     if (!this.state.isInvalidated) {
-      this.dispatch({ type: 'invalidate' })
+      this.#dispatch({ type: 'invalidate' })
     }
   }
 
@@ -332,42 +329,41 @@ export class Query<
       if (this.state.dataUpdatedAt && fetchOptions?.cancelRefetch) {
         // Silently cancel current fetch if the user wants to cancel refetches
         this.cancel({ silent: true })
-      } else if (this.promise) {
+      } else if (this.#promise) {
         // make sure that retries that were potentially cancelled due to unmounts can continue
-        this.retryer?.continueRetry()
+        this.#retryer?.continueRetry()
         // Return current promise if we are already fetching
-        return this.promise
+        return this.#promise
       }
     }
 
     // Update config if passed, otherwise the config from the last execution is used
     if (options) {
-      this.setOptions(options)
+      this.#setOptions(options)
     }
 
     // Use the options from the first observer with a query function if no function is found.
     // This can happen when the query is hydrated or created with setQueryData.
     if (!this.options.queryFn) {
-      const observer = this.observers.find((x) => x.options.queryFn)
+      const observer = this.#observers.find((x) => x.options.queryFn)
       if (observer) {
-        this.setOptions(observer.options)
+        this.#setOptions(observer.options)
       }
     }
 
-    if (!Array.isArray(this.options.queryKey)) {
-      if (process.env.NODE_ENV !== 'production') {
-        this.logger.error(
+    if (process.env.NODE_ENV !== 'production') {
+      if (!Array.isArray(this.options.queryKey)) {
+        console.error(
           `As of v4, queryKey needs to be an Array. If you are using a string like 'repoData', please change it to an Array, e.g. ['repoData']`,
         )
       }
     }
 
-    const abortController = getAbortController()
+    const abortController = new AbortController()
 
     // Create query function context
-    const queryFnContext: QueryFunctionContext<TQueryKey> = {
+    const queryFnContext: Omit<QueryFunctionContext<TQueryKey>, 'signal'> = {
       queryKey: this.queryKey,
-      pageParam: undefined,
       meta: this.meta,
     }
 
@@ -378,11 +374,8 @@ export class Query<
       Object.defineProperty(object, 'signal', {
         enumerable: true,
         get: () => {
-          if (abortController) {
-            this.abortSignalConsumed = true
-            return abortController.signal
-          }
-          return undefined
+          this.#abortSignalConsumed = true
+          return abortController.signal
         },
       })
     }
@@ -392,14 +385,19 @@ export class Query<
     // Create fetch function
     const fetchFn = () => {
       if (!this.options.queryFn) {
-        return Promise.reject('Missing queryFn')
+        return Promise.reject(new Error('Missing queryFn'))
       }
-      this.abortSignalConsumed = false
-      return this.options.queryFn(queryFnContext)
+      this.#abortSignalConsumed = false
+      return this.options.queryFn(
+        queryFnContext as QueryFunctionContext<TQueryKey>,
+      )
     }
 
     // Trigger behavior hook
-    const context: FetchContext<TQueryFnData, TError, TData, TQueryKey> = {
+    const context: Omit<
+      FetchContext<TQueryFnData, TError, TData, TQueryKey>,
+      'signal'
+    > = {
       fetchOptions,
       options: this.options,
       queryKey: this.queryKey,
@@ -409,23 +407,25 @@ export class Query<
 
     addSignalProperty(context)
 
-    this.options.behavior?.onFetch(context)
+    this.options.behavior?.onFetch(
+      context as FetchContext<TQueryFnData, TError, TData, TQueryKey>,
+    )
 
     // Store state in case the current fetch needs to be reverted
-    this.revertState = this.state
+    this.#revertState = this.state
 
     // Set to fetching state if not already in it
     if (
       this.state.fetchStatus === 'idle' ||
       this.state.fetchMeta !== context.fetchOptions?.meta
     ) {
-      this.dispatch({ type: 'fetch', meta: context.fetchOptions?.meta })
+      this.#dispatch({ type: 'fetch', meta: context.fetchOptions?.meta })
     }
 
     const onError = (error: TError | { silent?: boolean }) => {
       // Optimistically update state if needed
       if (!(isCancelledError(error) && error.silent)) {
-        this.dispatch({
+        this.#dispatch({
           type: 'error',
           error: error as TError,
         })
@@ -433,11 +433,7 @@ export class Query<
 
       if (!isCancelledError(error)) {
         // Notify cache callback
-        this.cache.config.onError?.(error, this as Query<any, any, any, any>)
-
-        if (process.env.NODE_ENV !== 'production') {
-          this.logger.error(error)
-        }
+        this.#cache.config.onError?.(error, this as Query<any, any, any, any>)
       }
 
       if (!this.isFetchingOptimistic) {
@@ -448,13 +444,13 @@ export class Query<
     }
 
     // Try to fetch the data
-    this.retryer = createRetryer({
+    this.#retryer = createRetryer({
       fn: context.fetchFn as () => TData,
-      abort: abortController?.abort.bind(abortController),
+      abort: abortController.abort.bind(abortController),
       onSuccess: (data) => {
         if (typeof data === 'undefined') {
           if (process.env.NODE_ENV !== 'production') {
-            this.logger.error(
+            console.error(
               `Query data cannot be undefined. Please make sure to return a value other than undefined from your query function. Affected query key: ${this.queryHash}`,
             )
           }
@@ -465,7 +461,7 @@ export class Query<
         this.setData(data as TData)
 
         // Notify cache callback
-        this.cache.config.onSuccess?.(data, this as Query<any, any, any, any>)
+        this.#cache.config.onSuccess?.(data, this as Query<any, any, any, any>)
 
         if (!this.isFetchingOptimistic) {
           // Schedule query gc after fetching
@@ -475,25 +471,25 @@ export class Query<
       },
       onError,
       onFail: (failureCount, error) => {
-        this.dispatch({ type: 'failed', failureCount, error })
+        this.#dispatch({ type: 'failed', failureCount, error })
       },
       onPause: () => {
-        this.dispatch({ type: 'pause' })
+        this.#dispatch({ type: 'pause' })
       },
       onContinue: () => {
-        this.dispatch({ type: 'continue' })
+        this.#dispatch({ type: 'continue' })
       },
       retry: context.options.retry,
       retryDelay: context.options.retryDelay,
       networkMode: context.options.networkMode,
     })
 
-    this.promise = this.retryer.promise
+    this.#promise = this.#retryer.promise
 
-    return this.promise
+    return this.#promise
   }
 
-  private dispatch(action: Action<TData, TError>): void {
+  #dispatch(action: Action<TData, TError>): void {
     const reducer = (
       state: QueryState<TData, TError>,
     ): QueryState<TData, TError> => {
@@ -525,7 +521,7 @@ export class Query<
               : 'paused',
             ...(!state.dataUpdatedAt && {
               error: null,
-              status: 'loading',
+              status: 'pending',
             }),
           }
         case 'success':
@@ -546,8 +542,8 @@ export class Query<
         case 'error':
           const error = action.error as unknown
 
-          if (isCancelledError(error) && error.revert && this.revertState) {
-            return { ...this.revertState }
+          if (isCancelledError(error) && error.revert && this.#revertState) {
+            return { ...this.#revertState }
           }
 
           return {
@@ -576,11 +572,11 @@ export class Query<
     this.state = reducer(this.state)
 
     notifyManager.batch(() => {
-      this.observers.forEach((observer) => {
+      this.#observers.forEach((observer) => {
         observer.onQueryUpdate(action)
       })
 
-      this.cache.notify({ query: this, type: 'updated', action })
+      this.#cache.notify({ query: this, type: 'updated', action })
     })
   }
 }
@@ -617,7 +613,7 @@ function getDefaultState<
     fetchFailureReason: null,
     fetchMeta: null,
     isInvalidated: false,
-    status: hasData ? 'success' : 'loading',
+    status: hasData ? 'success' : 'pending',
     fetchStatus: 'idle',
   }
 }