refactor: inline / remove some functions for size improvements (#3289)

* refactor: size

inline reducers in query and mutation because they are only used from dispatch

* refactor: remove default case in reducers

actions are only produced by our own code, which is in TypeScript, so we'll get a type error if there is an action not handled. Unknown actions can't exist, as the tests show: we'd need a ts-expects-error to go this way

* refactor: inline executeMutation

because it's only used once

* refactor: inline getObserver and updateObservers in useQueries

because it's only used once

* refactor: extract getDefaultState

getDefaultState is a pure function, with no access to `this`, so we can extract it. This is in-line with what `mutation` is doing

* refactor: remove getNextResult

it was only used in tests, and it's also not documented

* refactor: inline clearTimers

because it's only used once

* refactor: inline shouldNotifyListeners

because it's only used once

* refactor: inline resumePausedMutations

* refactor: tests

every stubbed queryFn needs a mock implementation to avoid console errors:

Error: Query data cannot be undefined

Author: TkDodo

src/core/mutation.ts

@@ -186,8 +186,33 @@ export class Mutation<
         })
     }
 
+    const executeMutation = () => {
+      this.retryer = createRetryer({
+        fn: () => {
+          if (!this.options.mutationFn) {
+            return Promise.reject('No mutationFn found')
+          }
+          return this.options.mutationFn(this.state.variables!)
+        },
+        onFail: () => {
+          this.dispatch({ type: 'failed' })
+        },
+        onPause: () => {
+          this.dispatch({ type: 'pause' })
+        },
+        onContinue: () => {
+          this.dispatch({ type: 'continue' })
+        },
+        retry: this.options.retry ?? 0,
+        retryDelay: this.options.retryDelay,
+        networkMode: this.options.networkMode,
+      })
+
+      return this.retryer.promise
+    }
+
     return promise
-      .then(() => this.executeMutation())
+      .then(executeMutation)
       .then(result => {
         data = result
         // Notify cache callback
@@ -253,33 +278,61 @@ export class Mutation<
       })
   }
 
-  private executeMutation(): Promise<TData> {
-    this.retryer = createRetryer({
-      fn: () => {
-        if (!this.options.mutationFn) {
-          return Promise.reject('No mutationFn found')
-        }
-        return this.options.mutationFn(this.state.variables!)
-      },
-      onFail: () => {
-        this.dispatch({ type: 'failed' })
-      },
-      onPause: () => {
-        this.dispatch({ type: 'pause' })
-      },
-      onContinue: () => {
-        this.dispatch({ type: 'continue' })
-      },
-      retry: this.options.retry ?? 0,
-      retryDelay: this.options.retryDelay,
-      networkMode: this.options.networkMode,
-    })
-
-    return this.retryer.promise
-  }
-
   private dispatch(action: Action<TData, TError, TVariables, TContext>): void {
-    this.state = this.reducer(action)
+    const reducer = (
+      state: MutationState<TData, TError, TVariables, TContext>
+    ): MutationState<TData, TError, TVariables, TContext> => {
+      switch (action.type) {
+        case 'failed':
+          return {
+            ...state,
+            failureCount: state.failureCount + 1,
+          }
+        case 'pause':
+          return {
+            ...state,
+            isPaused: true,
+          }
+        case 'continue':
+          return {
+            ...state,
+            isPaused: false,
+          }
+        case 'loading':
+          return {
+            ...state,
+            context: action.context,
+            data: undefined,
+            error: null,
+            isPaused: !canFetch(this.options.networkMode),
+            status: 'loading',
+            variables: action.variables,
+          }
+        case 'success':
+          return {
+            ...state,
+            data: action.data,
+            error: null,
+            status: 'success',
+            isPaused: false,
+          }
+        case 'error':
+          return {
+            ...state,
+            data: undefined,
+            error: action.error,
+            failureCount: state.failureCount + 1,
+            isPaused: false,
+            status: 'error',
+          }
+        case 'setState':
+          return {
+            ...state,
+            ...action.state,
+          }
+      }
+    }
+    this.state = reducer(this.state)
 
     notifyManager.batch(() => {
       this.observers.forEach(observer => {
@@ -292,62 +345,6 @@ export class Mutation<
       })
     })
   }
-
-  private reducer(
-    action: Action<TData, TError, TVariables, TContext>
-  ): MutationState<TData, TError, TVariables, TContext> {
-    switch (action.type) {
-      case 'failed':
-        return {
-          ...this.state,
-          failureCount: this.state.failureCount + 1,
-        }
-      case 'pause':
-        return {
-          ...this.state,
-          isPaused: true,
-        }
-      case 'continue':
-        return {
-          ...this.state,
-          isPaused: false,
-        }
-      case 'loading':
-        return {
-          ...this.state,
-          context: action.context,
-          data: undefined,
-          error: null,
-          isPaused: !canFetch(this.options.networkMode),
-          status: 'loading',
-          variables: action.variables,
-        }
-      case 'success':
-        return {
-          ...this.state,
-          data: action.data,
-          error: null,
-          status: 'success',
-          isPaused: false,
-        }
-      case 'error':
-        return {
-          ...this.state,
-          data: undefined,
-          error: action.error,
-          failureCount: this.state.failureCount + 1,
-          isPaused: false,
-          status: 'error',
-        }
-      case 'setState':
-        return {
-          ...this.state,
-          ...action.state,
-        }
-      default:
-        return this.state
-    }
-  }
 }
 
 export function getDefaultState<

src/core/mutationCache.ts

@@ -143,14 +143,6 @@ export class MutationCache extends Subscribable<MutationCacheListener> {
     })
   }
 
-  onFocus(): void {
-    this.resumePausedMutations()
-  }
-
-  onOnline(): void {
-    this.resumePausedMutations()
-  }
-
   resumePausedMutations(): Promise<void> {
     const pausedMutations = this.mutations.filter(x => x.state.isPaused)
     return notifyManager.batch(() =>

src/core/queriesObserver.ts

@@ -60,7 +60,52 @@ export class QueriesObserver extends Subscribable<QueriesObserverListener> {
     notifyOptions?: NotifyOptions
   ): void {
     this.queries = queries
-    this.updateObservers(notifyOptions)
+
+    notifyManager.batch(() => {
+      const prevObservers = this.observers
+
+      const newObserverMatches = this.findMatchingObservers(this.queries)
+
+      // set options for the new observers to notify of changes
+      newObserverMatches.forEach(match =>
+        match.observer.setOptions(match.defaultedQueryOptions, notifyOptions)
+      )
+
+      const newObservers = newObserverMatches.map(match => match.observer)
+      const newObserversMap = Object.fromEntries(
+        newObservers.map(observer => [observer.options.queryHash, observer])
+      )
+      const newResult = newObservers.map(observer =>
+        observer.getCurrentResult()
+      )
+
+      const hasIndexChange = newObservers.some(
+        (observer, index) => observer !== prevObservers[index]
+      )
+      if (prevObservers.length === newObservers.length && !hasIndexChange) {
+        return
+      }
+
+      this.observers = newObservers
+      this.observersMap = newObserversMap
+      this.result = newResult
+
+      if (!this.hasListeners()) {
+        return
+      }
+
+      difference(prevObservers, newObservers).forEach(observer => {
+        observer.destroy()
+      })
+
+      difference(newObservers, prevObservers).forEach(observer => {
+        observer.subscribe(result => {
+          this.onUpdate(observer, result)
+        })
+      })
+
+      this.notify()
+    })
   }
 
   getCurrentResult(): QueryObserverResult[] {
@@ -106,6 +151,12 @@ export class QueriesObserver extends Subscribable<QueriesObserverListener> {
         !matchingObservers.some(match => match.observer === prevObserver)
     )
 
+    const getObserver = (options: QueryObserverOptions): QueryObserver => {
+      const defaultedOptions = this.client.defaultQueryOptions(options)
+      const currentObserver = this.observersMap[defaultedOptions.queryHash!]
+      return currentObserver ?? new QueryObserver(this.client, defaultedOptions)
+    }
+
     const newOrReusedObservers: QueryObserverMatch[] = unmatchedQueries.map(
       (options, index) => {
         if (options.keepPreviousData) {
@@ -120,7 +171,7 @@ export class QueriesObserver extends Subscribable<QueriesObserverListener> {
         }
         return {
           defaultedQueryOptions: options,
-          observer: this.getObserver(options),
+          observer: getObserver(options),
         }
       }
     )
@@ -137,60 +188,6 @@ export class QueriesObserver extends Subscribable<QueriesObserverListener> {
       .sort(sortMatchesByOrderOfQueries)
   }
 
-  private getObserver(options: QueryObserverOptions): QueryObserver {
-    const defaultedOptions = this.client.defaultQueryOptions(options)
-    const currentObserver = this.observersMap[defaultedOptions.queryHash!]
-    return currentObserver ?? new QueryObserver(this.client, defaultedOptions)
-  }
-
-  private updateObservers(notifyOptions?: NotifyOptions): void {
-    notifyManager.batch(() => {
-      const prevObservers = this.observers
-
-      const newObserverMatches = this.findMatchingObservers(this.queries)
-
-      // set options for the new observers to notify of changes
-      newObserverMatches.forEach(match =>
-        match.observer.setOptions(match.defaultedQueryOptions, notifyOptions)
-      )
-
-      const newObservers = newObserverMatches.map(match => match.observer)
-      const newObserversMap = Object.fromEntries(
-        newObservers.map(observer => [observer.options.queryHash, observer])
-      )
-      const newResult = newObservers.map(observer =>
-        observer.getCurrentResult()
-      )
-
-      const hasIndexChange = newObservers.some(
-        (observer, index) => observer !== prevObservers[index]
-      )
-      if (prevObservers.length === newObservers.length && !hasIndexChange) {
-        return
-      }
-
-      this.observers = newObservers
-      this.observersMap = newObserversMap
-      this.result = newResult
-
-      if (!this.hasListeners()) {
-        return
-      }
-
-      difference(prevObservers, newObservers).forEach(observer => {
-        observer.destroy()
-      })
-
-      difference(newObservers, prevObservers).forEach(observer => {
-        observer.subscribe(result => {
-          this.onUpdate(observer, result)
-        })
-      })
-
-      this.notify()
-    })
-  }
-
   private onUpdate(observer: QueryObserver, result: QueryObserverResult): void {
     const index = this.observers.indexOf(observer)
     if (index !== -1) {