refactor: cleanup to reduce file size and add tests

Author: boschni

.babelrc

@@ -11,7 +11,15 @@
     "@babel/preset-typescript",
     "@babel/react"
   ],
-  "plugins": ["babel-plugin-transform-async-to-promises"],
+  "plugins": [
+    [
+      "const-enum",
+      {
+        "transform": "constObject"
+      }
+    ],
+    "babel-plugin-transform-async-to-promises"
+  ],
   "env": {
     "test": {
       "presets": [
@@ -24,7 +32,15 @@
           }
         ]
       ],
-      "plugins": ["babel-plugin-transform-async-to-promises"]
+      "plugins": [
+        [
+          "const-enum",
+          {
+            "transform": "constObject"
+          }
+        ],
+        "babel-plugin-transform-async-to-promises"
+      ]
     }
   }
 }

.eslintrc

@@ -25,6 +25,7 @@
       {
         "ignoreParameters": true
       }
-    ]
+    ],
+    "no-shadow": "error"
   }
 }

package.json

@@ -63,6 +63,7 @@
     "@typescript-eslint/parser": "^3.6.1",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.0.1",
+    "babel-plugin-const-enum": "^1.0.1",
     "babel-plugin-transform-async-to-promises": "^0.8.15",
     "cross-env": "^7.0.2",
     "eslint": "7.x",

src/core/query.ts

@@ -9,6 +9,7 @@ import {
   isDocumentVisible,
   isOnline,
   isServer,
+  isValidTimeout,
   noop,
   replaceEqualDeep,
   sleep,
@@ -26,14 +27,6 @@ import { QueryObserver, UpdateListener } from './queryObserver'
 
 // TYPES
 
-interface QueryInitConfig<TResult, TError> {
-  queryCache: QueryCache
-  queryKey: ArrayQueryKey
-  queryHash: string
-  config: QueryConfig<TResult, TError>
-  notifyGlobalListeners: (query: Query<TResult, TError>) => void
-}
-
 export interface QueryState<TResult, TError> {
   canFetchMore?: boolean
   data?: TResult
@@ -65,11 +58,11 @@ export interface RefetchOptions {
   throwOnError?: boolean
 }
 
-export enum ActionType {
-  Failed = 'Failed',
-  Fetch = 'Fetch',
-  Success = 'Success',
-  Error = 'Error',
+const enum ActionType {
+  Failed,
+  Fetch,
+  Success,
+  Error,
 }
 
 interface FailedAction {
@@ -114,17 +107,19 @@ export class Query<TResult, TError> {
   private cancelFetch?: () => void
   private continueFetch?: () => void
   private isTransportCancelable?: boolean
-  private notifyGlobalListeners: (query: Query<TResult, TError>) => void
-
-  constructor(init: QueryInitConfig<TResult, TError>) {
-    this.config = init.config
-    this.queryCache = init.queryCache
-    this.queryKey = init.queryKey
-    this.queryHash = init.queryHash
-    this.notifyGlobalListeners = init.notifyGlobalListeners
+
+  constructor(
+    queryKey: ArrayQueryKey,
+    queryHash: string,
+    config: QueryConfig<TResult, TError>
+  ) {
+    this.config = config
+    this.queryKey = queryKey
+    this.queryHash = queryHash
+    this.queryCache = config.queryCache!
     this.observers = []
-    this.state = getDefaultState(init.config)
-    this.cacheTime = init.config.cacheTime!
+    this.state = getDefaultState(config)
+    this.cacheTime = config.cacheTime!
     this.scheduleGc()
   }
 
@@ -140,7 +135,7 @@ export class Query<TResult, TError> {
       observer.onQueryUpdate(action)
     })
 
-    this.notifyGlobalListeners(this)
+    this.queryCache.notifyGlobalListeners(this)
   }
 
   private scheduleGc(): void {
@@ -150,7 +145,7 @@ export class Query<TResult, TError> {
 
     this.clearGcTimeout()
 
-    if (this.cacheTime === Infinity || this.observers.length > 0) {
+    if (this.observers.length > 0 || !isValidTimeout(this.cacheTime)) {
       return
     }
 
@@ -234,16 +229,16 @@ export class Query<TResult, TError> {
   onInteraction(type: 'focus' | 'online'): void {
     // Execute the first observer which is enabled,
     // stale and wants to refetch on this interaction.
-    const observer = this.observers.find(
+    const staleObserver = this.observers.find(
       observer =>
         observer.isStale() &&
         observer.config.enabled &&
         ((observer.config.refetchOnWindowFocus && type === 'focus') ||
           (observer.config.refetchOnReconnect && type === 'online'))
     )
 
-    if (observer) {
-      observer.fetch().catch(noop)
+    if (staleObserver) {
+      staleObserver.fetch().catch(noop)
     }
 
     // Continue any paused fetch
@@ -280,9 +275,9 @@ export class Query<TResult, TError> {
       if (this.isTransportCancelable) {
         this.cancel()
       }
-    }
 
-    this.scheduleGc()
+      this.scheduleGc()
+    }
   }
 
   async refetch(

src/core/queryCache.ts

@@ -77,18 +77,15 @@ export class QueryCache {
 
   constructor(config?: QueryCacheConfig) {
     this.config = config || {}
-
-    // A frozen cache does not add new queries to the cache
     this.globalListeners = []
-
     this.queries = {}
     this.queriesArray = []
     this.isFetching = 0
   }
 
-  private notifyGlobalListeners(query?: Query<any, any>) {
+  notifyGlobalListeners(query?: Query<any, any>) {
     this.isFetching = this.getQueries().reduce(
-      (acc, query) => (query.state.isFetching ? acc + 1 : acc),
+      (acc, q) => (q.state.isFetching ? acc + 1 : acc),
       0
     )
 
@@ -228,16 +225,9 @@ export class QueryCache {
       return this.queries[queryHash] as Query<TResult, TError>
     }
 
-    const query = new Query<TResult, TError>({
-      queryCache: this,
-      queryKey,
-      queryHash,
-      config,
-      notifyGlobalListeners: query => {
-        this.notifyGlobalListeners(query)
-      },
-    })
+    const query = new Query<TResult, TError>(queryKey, queryHash, config)
 
+    // A frozen cache does not add new queries to the cache
     if (!this.config.frozen) {
       this.queries[queryHash] = query
       this.queriesArray.push(query)
@@ -312,9 +302,11 @@ export class QueryCache {
       ...config,
     })
 
-    let query
     try {
-      query = this.buildQuery<TResult, TError>(queryKey, configWithoutRetry)
+      const query = this.buildQuery<TResult, TError>(
+        queryKey,
+        configWithoutRetry
+      )
       if (options?.force || query.isStaleByTime(config.staleTime)) {
         await query.fetch(undefined, configWithoutRetry)
       }

src/core/queryObserver.ts

@@ -1,4 +1,9 @@
-import { getStatusProps, isServer, isDocumentVisible } from './utils'
+import {
+  getStatusProps,
+  isServer,
+  isDocumentVisible,
+  isValidTimeout,
+} from './utils'
 import type { QueryResult, QueryObserverConfig } from './types'
 import type { Query, Action, FetchMoreOptions, RefetchOptions } from './query'
 import type { QueryCache } from './queryCache'
@@ -90,9 +95,7 @@ export class QueryObserver<TResult, TError> {
     // Update refetch interval if needed
     if (
       config.enabled !== prevConfig.enabled ||
-      config.refetchInterval !== prevConfig.refetchInterval ||
-      config.refetchIntervalInBackground !==
-        prevConfig.refetchIntervalInBackground
+      config.refetchInterval !== prevConfig.refetchInterval
     ) {
       this.updateRefetchInterval()
     }
@@ -144,14 +147,6 @@ export class QueryObserver<TResult, TError> {
     }
   }
 
-  private updateIsStale(): void {
-    const isStale = this.currentQuery.isStaleByTime(this.config.staleTime)
-    if (isStale !== this.currentResult.isStale) {
-      this.updateResult()
-      this.notify()
-    }
-  }
-
   private notify(): void {
     this.updateListener?.(this.currentResult)
   }
@@ -163,19 +158,21 @@ export class QueryObserver<TResult, TError> {
 
     this.clearStaleTimeout()
 
-    const staleTime = this.config.staleTime || 0
     const { isStale, updatedAt } = this.currentResult
 
-    if (isStale || staleTime === Infinity) {
+    if (isStale || !isValidTimeout(this.config.staleTime)) {
       return
     }
 
     const timeElapsed = Date.now() - updatedAt
-    const timeUntilStale = staleTime - timeElapsed + 1
+    const timeUntilStale = this.config.staleTime - timeElapsed + 1
     const timeout = Math.max(timeUntilStale, 0)
 
     this.staleTimeoutId = setTimeout(() => {
-      this.updateIsStale()
+      if (!this.currentResult.isStale) {
+        this.currentResult = { ...this.currentResult, isStale: true }
+        this.notify()
+      }
     }, timeout)
   }
 
@@ -186,12 +183,7 @@ export class QueryObserver<TResult, TError> {
 
     this.clearRefetchInterval()
 
-    if (
-      !this.config.enabled ||
-      !this.config.refetchInterval ||
-      this.config.refetchInterval < 0 ||
-      this.config.refetchInterval === Infinity
-    ) {
+    if (!this.config.enabled || !isValidTimeout(this.config.refetchInterval)) {
       return
     }
 
@@ -309,6 +301,8 @@ export class QueryObserver<TResult, TError> {
   }
 
   onQueryUpdate(action: Action<TResult, TError>): void {
+    const { type } = action
+
     // Store current result and get new result
     const prevResult = this.currentResult
     this.updateResult()
@@ -317,11 +311,11 @@ export class QueryObserver<TResult, TError> {
 
     // We need to check the action because the state could have
     // transitioned from success to success in case of `setQueryData`.
-    if (action.type === 'Success' && currentResult.isSuccess) {
+    if (type === 2) {
       config.onSuccess?.(currentResult.data!)
       config.onSettled?.(currentResult.data!, null)
       this.updateTimers()
-    } else if (action.type === 'Error' && currentResult.isError) {
+    } else if (type === 3) {
       config.onError?.(currentResult.error!)
       config.onSettled?.(undefined, currentResult.error!)
       this.updateTimers()

src/core/tests/utils.test.tsx

@@ -1,4 +1,4 @@
-import { deepEqual, replaceEqualDeep } from '../utils'
+import { deepEqual, replaceEqualDeep, deepIncludes } from '../utils'
 import { setConsole, queryCache } from '..'
 import { queryKey } from '../../react/tests/utils'
 
@@ -29,6 +29,20 @@ describe('core/utils', () => {
     setConsole(console)
   })
 
+  describe('deepIncludes', () => {
+    it('should return `true` if a includes b', () => {
+      const a = { a: { b: 'b' }, c: 'c', d: [{ d: 'd ' }] }
+      const b = { a: { b: 'b' }, c: 'c', d: [] }
+      expect(deepIncludes(a, b)).toEqual(true)
+    })
+
+    it('should return `false` if a does not include b', () => {
+      const a = { a: { b: 'b' }, c: 'c', d: [] }
+      const b = { a: { b: 'b' }, c: 'c', d: [{ d: 'd ' }] }
+      expect(deepIncludes(a, b)).toEqual(false)
+    })
+  })
+
   describe('deepEqual', () => {
     it('should return `true` for equal objects', () => {
       const a = { a: { b: 'b' }, c: 'c', d: [{ d: 'd ' }] }

src/core/utils.ts

@@ -54,7 +54,7 @@ export function functionalUpdate<TInput, TOutput>(
 
 function stableStringifyReplacer(_key: string, value: any): unknown {
   if (typeof value === 'function') {
-    throw new Error('Cannot stringify non JSON value')
+    throw new Error()
   }
 
   if (isObject(value)) {
@@ -89,6 +89,10 @@ export function deepIncludes(a: any, b: any): boolean {
   return false
 }
 
+export function isValidTimeout(value: any): value is number {
+  return typeof value === 'number' && value >= 0 && value !== Infinity
+}
+
 export function isDocumentVisible(): boolean {
   // document global can be unavailable in react native
   if (typeof document === 'undefined') {

src/hydration/tests/hydration.test.tsx

@@ -134,8 +134,7 @@ describe('dehydration and rehydration', () => {
     // Exact shape is not important here, just that staleTime and cacheTime
     // (and any future other config) is not included in it
     const dehydratedQuery = dehydrated?.queries.find(
-      dehydratedQuery =>
-        (dehydratedQuery?.config?.queryKey as Array<string>)[0] === 'string'
+      query => (query?.config?.queryKey as Array<string>)[0] === 'string'
     )
     expect(dehydratedQuery).toBeTruthy()
     expect(dehydratedQuery?.config.cacheTime).toBe(undefined)
@@ -180,8 +179,7 @@ describe('dehydration and rehydration', () => {
     // This is testing implementation details that can change and are not
     // part of the public API, but is important for keeping the payload small
     const dehydratedQuery = dehydrated?.queries.find(
-      dehydratedQuery =>
-        (dehydratedQuery?.config?.queryKey as Array<string>)[0] === 'string'
+      query => (query?.config?.queryKey as Array<string>)[0] === 'string'
     )
     expect(dehydratedQuery).toBeUndefined()