feat: replace query instance with query observer

Author: boschni

src/core/config.ts

@@ -1,4 +1,4 @@
-import { stableStringify, identity, deepEqual } from './utils'
+import { stableStringify, deepEqual } from './utils'
 import {
   ArrayQueryKey,
   QueryKey,
@@ -30,9 +30,6 @@ export const defaultQueryKeySerializerFn: QueryKeySerializerFunction = (
 }
 
 export const DEFAULT_CONFIG: ReactQueryConfig = {
-  shared: {
-    suspense: false,
-  },
   queries: {
     queryKeySerializerFn: defaultQueryKeySerializerFn,
     enabled: true,
@@ -41,15 +38,8 @@ export const DEFAULT_CONFIG: ReactQueryConfig = {
     staleTime: 0,
     cacheTime: 5 * 60 * 1000,
     refetchOnWindowFocus: true,
-    refetchInterval: false,
-    queryFnParamsFilter: identity,
     refetchOnMount: true,
     isDataEqual: deepEqual,
-    useErrorBoundary: false,
-  },
-  mutations: {
-    throwOnError: false,
-    useErrorBoundary: false,
   },
 }
 

src/core/query.ts

@@ -6,10 +6,8 @@ import {
   noop,
   Console,
   getStatusProps,
-  shallowEqual,
   Updater,
 } from './utils'
-import { QueryInstance, OnStateUpdateFunction } from './queryInstance'
 import {
   ArrayQueryKey,
   InfiniteQueryConfig,
@@ -19,7 +17,8 @@ import {
   QueryFunction,
   QueryStatus,
 } from './types'
-import { QueryCache } from './queryCache'
+import type { QueryCache } from './queryCache'
+import { QueryObserver, UpdateListener } from './queryObserver'
 
 // TYPES
 
@@ -39,7 +38,7 @@ export interface QueryState<TResult, TError> {
   isError: boolean
   isFetched: boolean
   isFetching: boolean
-  isFetchingMore?: IsFetchingMoreValue
+  isFetchingMore: IsFetchingMoreValue
   isIdle: boolean
   isLoading: boolean
   isStale: boolean
@@ -111,7 +110,7 @@ export class Query<TResult, TError> {
   queryKey: ArrayQueryKey
   queryHash: string
   config: QueryConfig<TResult, TError>
-  instances: QueryInstance<TResult, TError>[]
+  observers: QueryObserver<TResult, TError>[]
   state: QueryState<TResult, TError>
   shouldContinueRetryOnFocus?: boolean
   promise?: Promise<TResult | undefined>
@@ -131,17 +130,14 @@ export class Query<TResult, TError> {
     this.queryKey = init.queryKey
     this.queryHash = init.queryHash
     this.notifyGlobalListeners = init.notifyGlobalListeners
-    this.instances = []
+    this.observers = []
     this.state = getDefaultState(init.config)
 
     if (init.config.infinite) {
       const infiniteConfig = init.config as InfiniteQueryConfig<TResult, TError>
       const infiniteData = (this.state.data as unknown) as TResult[] | undefined
 
-      if (
-        typeof infiniteData !== 'undefined' &&
-        typeof this.state.canFetchMore === 'undefined'
-      ) {
+      if (typeof infiniteData !== 'undefined') {
         this.fetchMoreVariable = infiniteConfig.getFetchMore(
           infiniteData[infiniteData.length - 1],
           infiniteData
@@ -154,31 +150,39 @@ export class Query<TResult, TError> {
         this.pageVariables = [[...this.queryKey]]
       }
     }
-  }
 
-  private dispatch(action: Action<TResult, TError>): void {
-    const newState = queryReducer(this.state, action)
+    // If the query started with data, schedule
+    // a stale timeout
+    if (!isServer && this.state.data) {
+      this.scheduleStaleTimeout()
+
+      // Simulate a query healing process
+      this.heal()
 
-    // Only update state if something has changed
-    if (!shallowEqual(this.state, newState)) {
-      this.state = newState
-      this.instances.forEach(d => d.onStateUpdate(newState, action))
-      this.notifyGlobalListeners(this)
+      // Schedule for garbage collection in case
+      // nothing subscribes to this query
+      this.scheduleGarbageCollection()
     }
   }
 
+  setConfig(config: QueryConfig<TResult, TError>): void {
+    this.config = config
+  }
+
+  private dispatch(action: Action<TResult, TError>): void {
+    this.state = queryReducer(this.state, action)
+    this.observers.forEach(d => d.onQueryUpdate(this.state, action))
+    this.notifyGlobalListeners(this)
+  }
+
   scheduleStaleTimeout(): void {
     if (isServer) {
       return
     }
 
     this.clearStaleTimeout()
 
-    if (this.state.isStale) {
-      return
-    }
-
-    if (this.config.staleTime === Infinity) {
+    if (this.state.isStale || this.config.staleTime === Infinity) {
       return
     }
 
@@ -190,10 +194,6 @@ export class Query<TResult, TError> {
   invalidate(): void {
     this.clearStaleTimeout()
 
-    if (!this.queryCache.queries[this.queryHash]) {
-      return
-    }
-
     if (this.state.isStale) {
       return
     }
@@ -202,12 +202,12 @@ export class Query<TResult, TError> {
   }
 
   scheduleGarbageCollection(): void {
-    this.clearCacheTimeout()
-
-    if (!this.queryCache.queries[this.queryHash]) {
+    if (isServer) {
       return
     }
 
+    this.clearCacheTimeout()
+
     if (this.config.cacheTime === Infinity) {
       return
     }
@@ -249,9 +249,9 @@ export class Query<TResult, TError> {
     delete this.promise
   }
 
-  clearIntervals(): void {
-    this.instances.forEach(instance => {
-      instance.clearInterval()
+  private clearTimersObservers(): void {
+    this.observers.forEach(observer => {
+      observer.clearRefetchInterval()
     })
   }
 
@@ -301,19 +301,57 @@ export class Query<TResult, TError> {
     this.clearStaleTimeout()
     this.clearCacheTimeout()
     this.clearRetryTimeout()
-    this.clearIntervals()
+    this.clearTimersObservers()
     this.cancel()
     delete this.queryCache.queries[this.queryHash]
     this.notifyGlobalListeners(this)
   }
 
+  isEnabled(): boolean {
+    return this.observers.some(observer => observer.config.enabled)
+  }
+
+  shouldRefetchOnWindowFocus(): boolean {
+    return (
+      this.isEnabled() &&
+      this.state.isStale &&
+      this.observers.some(observer => observer.config.refetchOnWindowFocus)
+    )
+  }
+
   subscribe(
-    onStateUpdate?: OnStateUpdateFunction<TResult, TError>
-  ): QueryInstance<TResult, TError> {
-    const instance = new QueryInstance(this, onStateUpdate)
-    this.instances.push(instance)
+    listener?: UpdateListener<TResult, TError>
+  ): QueryObserver<TResult, TError> {
+    const observer = new QueryObserver<TResult, TError>({
+      queryCache: this.queryCache,
+      queryKey: this.queryKey,
+      ...this.config,
+    })
+
+    observer.subscribe(listener)
+
+    return observer
+  }
+
+  subscribeObserver(observer: QueryObserver<TResult, TError>): void {
+    this.observers.push(observer)
     this.heal()
-    return instance
+  }
+
+  unsubscribeObserver(
+    observer: QueryObserver<TResult, TError>,
+    preventGC?: boolean
+  ): void {
+    this.observers = this.observers.filter(x => x !== observer)
+
+    if (!this.observers.length) {
+      this.cancel()
+
+      if (!preventGC) {
+        // Schedule garbage collection
+        this.scheduleGarbageCollection()
+      }
+    }
   }
 
   // Set up the core fetcher function
@@ -323,7 +361,11 @@ export class Query<TResult, TError> {
   ): Promise<TResult> {
     try {
       // Perform the query
-      const promiseOrValue = fn(...this.config.queryFnParamsFilter!(args))
+      const filter = this.config.queryFnParamsFilter
+      const params = filter ? filter(args) : args
+
+      // Perform the query
+      const promiseOrValue = fn(...params)
 
       this.cancelPromises = () => (promiseOrValue as any)?.cancel?.()
 
@@ -502,8 +544,10 @@ export class Query<TResult, TError> {
       this.cancelled = null
 
       try {
-        // Set up the query refreshing state
-        this.dispatch({ type: ActionType.Fetch })
+        // Set to fetching state if not already in it
+        if (!this.state.isFetching) {
+          this.dispatch({ type: ActionType.Fetch })
+        }
 
         // Try to get the data
         const data = await this.tryFetchData(queryFn!, this.queryKey)
@@ -573,6 +617,7 @@ function getDefaultState<TResult, TError>(
     error: null,
     isFetched: false,
     isFetching: initialStatus === QueryStatus.Loading,
+    isFetchingMore: false,
     failureCount: 0,
     isStale,
     data: initialData,

src/core/queryCache.ts

@@ -195,11 +195,8 @@ export class QueryCache {
     try {
       await Promise.all(
         this.getQueries(predicate, options).map(query => {
-          if (query.instances.length) {
-            if (
-              refetchActive &&
-              query.instances.some(instance => instance.config.enabled)
-            ) {
+          if (query.observers.length) {
+            if (refetchActive && query.isEnabled()) {
               return query.fetch()
             }
           } else {
@@ -240,7 +237,7 @@ export class QueryCache {
 
     if (this.queries[queryHash]) {
       query = this.queries[queryHash] as Query<TResult, TError>
-      query.config = config
+      query.setConfig(config)
     }
 
     if (!query) {
@@ -254,18 +251,6 @@ export class QueryCache {
         },
       })
 
-      // If the query started with data, schedule
-      // a stale timeout
-      if (!isServer && query.state.data) {
-        query.scheduleStaleTimeout()
-
-        // Simulate a query healing process
-        query.heal()
-        // Schedule for garbage collection in case
-        // nothing subscribes to this query
-        query.scheduleGarbageCollection()
-      }
-
       if (!this.config.frozen) {
         this.queries[queryHash] = query