fix: refetch should create new query when removed

Author: boschni

src/core/logger.ts

@@ -22,6 +22,6 @@ export function getLogger(): Logger {
   return logger
 }
 
-export function setLogger(c: Logger) {
-  logger = c
+export function setLogger(newLogger: Logger) {
+  logger = newLogger
 }

src/core/queriesObserver.ts

@@ -31,10 +31,17 @@ export class QueriesObserver {
 
   subscribe(listener?: QueriesObserverListener): () => void {
     const callback = listener || (() => undefined)
+
     this.listeners.push(callback)
+
     if (this.listeners.length === 1) {
-      this.onMount()
+      this.observers.forEach(observer => {
+        observer.subscribe(result => {
+          this.onUpdate(observer, result)
+        })
+      })
     }
+
     return () => {
       this.unsubscribe(callback)
     }
@@ -43,22 +50,14 @@ export class QueriesObserver {
   private unsubscribe(listener: QueriesObserverListener): void {
     this.listeners = this.listeners.filter(x => x !== listener)
     if (!this.listeners.length) {
-      this.clear()
+      this.destroy()
     }
   }
 
-  onMount(): void {
-    this.observers.forEach(observer => {
-      observer.subscribe(result => {
-        this.onUpdate(observer, result)
-      })
-    })
-  }
-
-  clear(): void {
+  destroy(): void {
     this.listeners = []
     this.observers.forEach(observer => {
-      observer.clear()
+      observer.destroy()
     })
   }
 
@@ -112,7 +111,7 @@ export class QueriesObserver {
     }
 
     difference(prevObservers, newObservers).forEach(observer => {
-      observer.clear()
+      observer.destroy()
     })
 
     difference(newObservers, prevObservers).forEach(observer => {
@@ -133,9 +132,9 @@ export class QueriesObserver {
   }
 
   private notify(): void {
-    const { result, listeners } = this
+    const { result } = this
     notifyManager.batch(() => {
-      listeners.forEach(listener => {
+      this.listeners.forEach(listener => {
         notifyManager.schedule(() => {
           listener(result)
         })

src/core/query.ts

@@ -7,10 +7,8 @@ import {
   functionalUpdate,
   isCancelable,
   isCancelledError,
-  isDocumentVisible,
-  isOnline,
-  isServer,
   isValidTimeout,
+  isVisibleAndOnline,
   noop,
   replaceEqualDeep,
   sleep,
@@ -163,29 +161,17 @@ export class Query<TData = unknown, TError = unknown, TQueryFnData = TData> {
   private scheduleGc(): void {
     this.clearGcTimeout()
 
-    if (
-      isServer ||
-      this.observers.length > 0 ||
-      !isValidTimeout(this.cacheTime)
-    ) {
-      return
+    if (!this.observers.length && isValidTimeout(this.cacheTime)) {
+      this.gcTimeout = setTimeout(() => {
+        this.remove()
+      }, this.cacheTime)
     }
-
-    this.gcTimeout = setTimeout(() => {
-      this.remove()
-    }, this.cacheTime)
   }
 
   cancel(options?: CancelOptions): Promise<void> {
-    const promise: Promise<any> = this.promise || Promise.resolve()
+    const promise = this.promise
     this.cancelFetch?.(options)
-    return promise.then(noop).catch(noop)
-  }
-
-  private clearTimersObservers(): void {
-    this.observers.forEach(observer => {
-      observer.clearTimers()
-    })
+    return promise ? promise.then(noop).catch(noop) : Promise.resolve()
   }
 
   private clearGcTimeout() {
@@ -231,7 +217,6 @@ export class Query<TData = unknown, TError = unknown, TQueryFnData = TData> {
 
   destroy(): void {
     this.clearGcTimeout()
-    this.clearTimersObservers()
     this.cancel()
   }
 
@@ -293,7 +278,7 @@ export class Query<TData = unknown, TError = unknown, TQueryFnData = TData> {
       fetchObserver.refetch()
     }
 
-    // Continue any paused fetch
+    // Continue fetch if currently paused
     this.continueFetch?.()
   }
 
@@ -395,8 +380,7 @@ export class Query<TData = unknown, TError = unknown, TQueryFnData = TData> {
     params: unknown[]
   ): Promise<TData> {
     // Create function to fetch the data
-    const queryFn = options.queryFn || defaultQueryFn
-    const fetchData = () => queryFn(...params)
+    const fetchData = () => this.executeQueryFn(options, params)
 
     // Set to fetching state if not already in it
     if (!this.state.isFetching) {
@@ -414,7 +398,6 @@ export class Query<TData = unknown, TError = unknown, TQueryFnData = TData> {
     params: unknown[],
     fetchOptions?: FetchOptions
   ): Promise<TData> {
-    const queryFn = options.queryFn || defaultQueryFn
     const fetchMore = fetchOptions?.fetchMore
     const pageParam = fetchMore?.pageParam
     const isFetchingNextPage = fetchMore?.direction === 'forward'
@@ -434,14 +417,12 @@ export class Query<TData = unknown, TError = unknown, TQueryFnData = TData> {
         return Promise.resolve(pages)
       }
 
-      return Promise.resolve()
-        .then(() => queryFn(...params, param))
-        .then(page => {
-          newPageParams = previous
-            ? [param, ...newPageParams]
-            : [...newPageParams, param]
-          return previous ? [page, ...pages] : [...pages, page]
-        })
+      return this.executeQueryFn(options, [...params, param]).then(page => {
+        newPageParams = previous
+          ? [param, ...newPageParams]
+          : [...newPageParams, param]
+        return previous ? [page, ...pages] : [...pages, page]
+      })
     }
 
     // Create function to fetch the data
@@ -510,6 +491,15 @@ export class Query<TData = unknown, TError = unknown, TQueryFnData = TData> {
     )
   }
 
+  private executeQueryFn(
+    options: QueryOptions<TData, TError, TQueryFnData>,
+    params: unknown[]
+  ): Promise<TQueryFnData> {
+    return options.queryFn
+      ? Promise.resolve(options.queryFn(...params))
+      : Promise.reject()
+  }
+
   private tryFetchData(
     options: QueryOptions<TData, TError, TQueryFnData>,
     fn: QueryFunction
@@ -604,8 +594,9 @@ export class Query<TData = unknown, TError = unknown, TQueryFnData = TData> {
               // Pause if needed
               .then(() => {
                 // Pause retry if the document is not visible or when the device is offline
-                if (!isDocumentVisible() || !isOnline()) {
+                if (!isVisibleAndOnline()) {
                   return new Promise(continueResolve => {
+                    // Create callback to continue this fetch
                     this.continueFetch = continueResolve
                   })
                 }
@@ -621,10 +612,6 @@ export class Query<TData = unknown, TError = unknown, TQueryFnData = TData> {
   }
 }
 
-function defaultQueryFn() {
-  return Promise.reject()
-}
-
 function getNextPageParam<TData, TError, TQueryFnData>(
   options: QueryOptions<TData, TError, TQueryFnData>,
   pages: TQueryFnData[]

src/core/queryClient.ts

@@ -2,8 +2,7 @@ import {
   CancelOptions,
   QueryFilters,
   Updater,
-  isDocumentVisible,
-  isOnline,
+  isVisibleAndOnline,
   noop,
   parseFilterArgs,
   parseQueryArgs,
@@ -21,7 +20,7 @@ import type {
   QueryOptions,
   RefetchOptions,
 } from './types'
-import type { QueryState, SetDataOptions } from './query'
+import type { Query, QueryState, SetDataOptions } from './query'
 import type { QueryCache } from './queryCache'
 import { QueriesObserver } from './queriesObserver'
 import { QueryObserver } from './queryObserver'
@@ -343,25 +342,28 @@ export class QueryClient {
 
 const mountedClients: QueryClient[] = []
 
-function onFocus() {
-  onExternalEvent('focus')
+function getAllQueries() {
+  return uniq(mountedClients.map(client => client.getCache())).reduce<Query[]>(
+    (queries, cache) => queries.concat(cache.getAll()),
+    []
+  )
 }
 
-function onOnline() {
-  onExternalEvent('online')
+function onFocus() {
+  if (isVisibleAndOnline()) {
+    notifyManager.batch(() => {
+      getAllQueries().forEach(query => {
+        query.onFocus()
+      })
+    })
+  }
 }
 
-function onExternalEvent(type: 'focus' | 'online') {
-  if (isDocumentVisible() && isOnline()) {
+function onOnline() {
+  if (isVisibleAndOnline()) {
     notifyManager.batch(() => {
-      uniq(mountedClients.map(x => x.getCache())).forEach(cache => {
-        cache.getAll().forEach(query => {
-          if (type === 'focus') {
-            query.onFocus()
-          } else {
-            query.onOnline()
-          }
-        })
+      getAllQueries().forEach(query => {
+        query.onOnline()
       })
     })
   }