@tanstack/query-core 4.0.0

package/src/notifyManager.ts

@@ -0,0 +1,96 @@
+import { scheduleMicrotask } from './utils'
+
+// TYPES
+
+type NotifyCallback = () => void
+
+type NotifyFunction = (callback: () => void) => void
+
+type BatchNotifyFunction = (callback: () => void) => void
+
+export function createNotifyManager() {
+  let queue: NotifyCallback[] = []
+  let transactions = 0
+  let notifyFn: NotifyFunction = (callback) => {
+    callback()
+  }
+  let batchNotifyFn: BatchNotifyFunction = (callback: () => void) => {
+    callback()
+  }
+
+  const batch = <T>(callback: () => T): T => {
+    let result
+    transactions++
+    try {
+      result = callback()
+    } finally {
+      transactions--
+      if (!transactions) {
+        flush()
+      }
+    }
+    return result
+  }
+
+  const schedule = (callback: NotifyCallback): void => {
+    if (transactions) {
+      queue.push(callback)
+    } else {
+      scheduleMicrotask(() => {
+        notifyFn(callback)
+      })
+    }
+  }
+
+  /**
+   * All calls to the wrapped function will be batched.
+   */
+  const batchCalls = <T extends Function>(callback: T): T => {
+    return ((...args: any[]) => {
+      schedule(() => {
+        callback(...args)
+      })
+    }) as any
+  }
+
+  const flush = (): void => {
+    const originalQueue = queue
+    queue = []
+    if (originalQueue.length) {
+      scheduleMicrotask(() => {
+        batchNotifyFn(() => {
+          originalQueue.forEach((callback) => {
+            notifyFn(callback)
+          })
+        })
+      })
+    }
+  }
+
+  /**
+   * Use this method to set a custom notify function.
+   * This can be used to for example wrap notifications with `React.act` while running tests.
+   */
+  const setNotifyFunction = (fn: NotifyFunction) => {
+    notifyFn = fn
+  }
+
+  /**
+   * Use this method to set a custom function to batch notifications together into a single tick.
+   * By default React Query will use the batch function provided by ReactDOM or React Native.
+   */
+  const setBatchNotifyFunction = (fn: BatchNotifyFunction) => {
+    batchNotifyFn = fn
+  }
+
+  return {
+    batch,
+    batchCalls,
+    schedule,
+    setNotifyFunction,
+    setBatchNotifyFunction,
+  } as const
+}
+
+// SINGLETON
+export const notifyManager = createNotifyManager()

package/src/onlineManager.ts

@@ -0,0 +1,89 @@
+import { Subscribable } from './subscribable'
+import { isServer } from './utils'
+
+type SetupFn = (
+  setOnline: (online?: boolean) => void,
+) => (() => void) | undefined
+
+export class OnlineManager extends Subscribable {
+  private online?: boolean
+  private cleanup?: () => void
+
+  private setup: SetupFn
+
+  constructor() {
+    super()
+    this.setup = (onOnline) => {
+      // addEventListener does not exist in React Native, but window does
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (!isServer && window.addEventListener) {
+        const listener = () => onOnline()
+        // Listen to online
+        window.addEventListener('online', listener, false)
+        window.addEventListener('offline', listener, false)
+
+        return () => {
+          // Be sure to unsubscribe if a new handler is set
+          window.removeEventListener('online', listener)
+          window.removeEventListener('offline', listener)
+        }
+      }
+    }
+  }
+
+  protected onSubscribe(): void {
+    if (!this.cleanup) {
+      this.setEventListener(this.setup)
+    }
+  }
+
+  protected onUnsubscribe() {
+    if (!this.hasListeners()) {
+      this.cleanup?.()
+      this.cleanup = undefined
+    }
+  }
+
+  setEventListener(setup: SetupFn): void {
+    this.setup = setup
+    this.cleanup?.()
+    this.cleanup = setup((online?: boolean) => {
+      if (typeof online === 'boolean') {
+        this.setOnline(online)
+      } else {
+        this.onOnline()
+      }
+    })
+  }
+
+  setOnline(online?: boolean): void {
+    this.online = online
+
+    if (online) {
+      this.onOnline()
+    }
+  }
+
+  onOnline(): void {
+    this.listeners.forEach((listener) => {
+      listener()
+    })
+  }
+
+  isOnline(): boolean {
+    if (typeof this.online === 'boolean') {
+      return this.online
+    }
+
+    if (
+      typeof navigator === 'undefined' ||
+      typeof navigator.onLine === 'undefined'
+    ) {
+      return true
+    }
+
+    return navigator.onLine
+  }
+}
+
+export const onlineManager = new OnlineManager()

package/src/queriesObserver.ts

@@ -0,0 +1,211 @@
+import { difference, replaceAt } from './utils'
+import { notifyManager } from './notifyManager'
+import type {
+  QueryObserverOptions,
+  QueryObserverResult,
+  DefaultedQueryObserverOptions,
+} from './types'
+import type { QueryClient } from './queryClient'
+import { NotifyOptions, QueryObserver } from './queryObserver'
+import { Subscribable } from './subscribable'
+
+type QueriesObserverListener = (result: QueryObserverResult[]) => void
+
+export class QueriesObserver extends Subscribable<QueriesObserverListener> {
+  private client: QueryClient
+  private result: QueryObserverResult[]
+  private queries: QueryObserverOptions[]
+  private observers: QueryObserver[]
+  private observersMap: Record<string, QueryObserver>
+
+  constructor(client: QueryClient, queries?: QueryObserverOptions[]) {
+    super()
+
+    this.client = client
+    this.queries = []
+    this.result = []
+    this.observers = []
+    this.observersMap = {}
+
+    if (queries) {
+      this.setQueries(queries)
+    }
+  }
+
+  protected onSubscribe(): void {
+    if (this.listeners.length === 1) {
+      this.observers.forEach((observer) => {
+        observer.subscribe((result) => {
+          this.onUpdate(observer, result)
+        })
+      })
+    }
+  }
+
+  protected onUnsubscribe(): void {
+    if (!this.listeners.length) {
+      this.destroy()
+    }
+  }
+
+  destroy(): void {
+    this.listeners = []
+    this.observers.forEach((observer) => {
+      observer.destroy()
+    })
+  }
+
+  setQueries(
+    queries: QueryObserverOptions[],
+    notifyOptions?: NotifyOptions,
+  ): void {
+    this.queries = queries
+
+    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[] {
+    return this.result
+  }
+
+  getOptimisticResult(queries: QueryObserverOptions[]): QueryObserverResult[] {
+    return this.findMatchingObservers(queries).map((match) =>
+      match.observer.getOptimisticResult(match.defaultedQueryOptions),
+    )
+  }
+
+  private findMatchingObservers(
+    queries: QueryObserverOptions[],
+  ): QueryObserverMatch[] {
+    const prevObservers = this.observers
+    const defaultedQueryOptions = queries.map((options) =>
+      this.client.defaultQueryOptions(options),
+    )
+
+    const matchingObservers: QueryObserverMatch[] =
+      defaultedQueryOptions.flatMap((defaultedOptions) => {
+        const match = prevObservers.find(
+          (observer) =>
+            observer.options.queryHash === defaultedOptions.queryHash,
+        )
+        if (match != null) {
+          return [{ defaultedQueryOptions: defaultedOptions, observer: match }]
+        }
+        return []
+      })
+
+    const matchedQueryHashes = matchingObservers.map(
+      (match) => match.defaultedQueryOptions.queryHash,
+    )
+    const unmatchedQueries = defaultedQueryOptions.filter(
+      (defaultedOptions) =>
+        !matchedQueryHashes.includes(defaultedOptions.queryHash),
+    )
+
+    const unmatchedObservers = prevObservers.filter(
+      (prevObserver) =>
+        !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) {
+          // return previous data from one of the observers that no longer match
+          const previouslyUsedObserver = unmatchedObservers[index]
+          if (previouslyUsedObserver !== undefined) {
+            return {
+              defaultedQueryOptions: options,
+              observer: previouslyUsedObserver,
+            }
+          }
+        }
+        return {
+          defaultedQueryOptions: options,
+          observer: getObserver(options),
+        }
+      },
+    )
+
+    const sortMatchesByOrderOfQueries = (
+      a: QueryObserverMatch,
+      b: QueryObserverMatch,
+    ): number =>
+      defaultedQueryOptions.indexOf(a.defaultedQueryOptions) -
+      defaultedQueryOptions.indexOf(b.defaultedQueryOptions)
+
+    return matchingObservers
+      .concat(newOrReusedObservers)
+      .sort(sortMatchesByOrderOfQueries)
+  }
+
+  private onUpdate(observer: QueryObserver, result: QueryObserverResult): void {
+    const index = this.observers.indexOf(observer)
+    if (index !== -1) {
+      this.result = replaceAt(this.result, index, result)
+      this.notify()
+    }
+  }
+
+  private notify(): void {
+    notifyManager.batch(() => {
+      this.listeners.forEach((listener) => {
+        listener(this.result)
+      })
+    })
+  }
+}
+
+type QueryObserverMatch = {
+  defaultedQueryOptions: DefaultedQueryObserverOptions
+  observer: QueryObserver
+}