refactor: move refetch logic into observer

Author: boschni

src/core/infiniteQueryBehavior.ts

@@ -9,7 +9,7 @@ export function infiniteQueryBehavior<
   return {
     onFetch: context => {
       context.queryFn = () => {
-        const fetchMore = context.fetchOptions?.meta.fetchMore
+        const fetchMore = context.fetchOptions?.meta?.fetchMore
         const pageParam = fetchMore?.pageParam
         const isFetchingNextPage = fetchMore?.direction === 'forward'
         const isFetchingPreviousPage = fetchMore?.direction === 'backward'

src/core/query.ts

@@ -34,15 +34,16 @@ interface QueryConfig<TData, TError, TQueryFnData> {
 export interface QueryState<TData = unknown, TError = unknown> {
   data: TData | undefined
   dataUpdateCount: number
+  dataUpdatedAt: number
   error: TError | null
   errorUpdateCount: number
-  failureCount: number
+  errorUpdatedAt: number
+  fetchFailureCount: number
   fetchMeta: any
   isFetching: boolean
   isInvalidated: boolean
   isPaused: boolean
   status: QueryStatus
-  updatedAt: number
 }
 
 export interface FetchContext<TData, TError, TQueryFnData> {
@@ -232,51 +233,35 @@ export class Query<TData = unknown, TError = unknown, TQueryFnData = TData> {
   isStale(): boolean {
     return (
       this.state.isInvalidated ||
-      !this.state.updatedAt ||
+      !this.state.dataUpdatedAt ||
       this.observers.some(observer => observer.getCurrentResult().isStale)
     )
   }
 
   isStaleByTime(staleTime = 0): boolean {
     return (
       this.state.isInvalidated ||
-      !this.state.updatedAt ||
-      !timeUntilStale(this.state.updatedAt, staleTime)
+      !this.state.dataUpdatedAt ||
+      !timeUntilStale(this.state.dataUpdatedAt, staleTime)
     )
   }
 
   onFocus(): void {
-    this.onExternalEvent('focus')
-  }
+    const observer = this.observers.find(x => x.willFetchOnWindowFocus())
 
-  onOnline(): void {
-    this.onExternalEvent('online')
+    if (observer) {
+      observer.refetch()
+    }
+
+    // Continue fetch if currently paused
+    this.retryer?.continue()
   }
 
-  private onExternalEvent(type: 'focus' | 'online'): void {
-    // Execute the first observer that wants to fetch on this event
-    const fetchObserver = this.observers.find(observer => {
-      const {
-        enabled,
-        refetchOnWindowFocus,
-        refetchOnReconnect,
-      } = observer.options
-
-      const { isStale } = observer.getCurrentResult()
-
-      return (
-        enabled !== false &&
-        ((type === 'focus' &&
-          (refetchOnWindowFocus === 'always' ||
-            (refetchOnWindowFocus !== false && isStale))) ||
-          (type === 'online' &&
-            (refetchOnReconnect === 'always' ||
-              (refetchOnReconnect !== false && isStale))))
-      )
-    })
+  onOnline(): void {
+    const observer = this.observers.find(x => x.willFetchOnReconnect())
 
-    if (fetchObserver) {
-      fetchObserver.refetch()
+    if (observer) {
+      observer.refetch()
     }
 
     // Continue fetch if currently paused
@@ -331,7 +316,7 @@ export class Query<TData = unknown, TError = unknown, TQueryFnData = TData> {
     fetchOptions?: FetchOptions
   ): Promise<TData> {
     if (this.state.isFetching)
-      if (this.state.updatedAt && fetchOptions?.cancelRefetch) {
+      if (this.state.dataUpdatedAt && fetchOptions?.cancelRefetch) {
         // Silently cancel current fetch if the user wants to cancel refetches
         this.cancel({ silent: true })
       } else if (this.promise) {
@@ -450,15 +435,16 @@ export class Query<TData = unknown, TError = unknown, TQueryFnData = TData> {
     return {
       data,
       dataUpdateCount: 0,
+      dataUpdatedAt: hasData ? Date.now() : 0,
       error: null,
       errorUpdateCount: 0,
-      failureCount: 0,
+      errorUpdatedAt: 0,
+      fetchFailureCount: 0,
       fetchMeta: undefined,
       isFetching: false,
       isInvalidated: false,
       isPaused: false,
       status: hasData ? 'success' : 'idle',
-      updatedAt: hasData ? Date.now() : 0,
     }
   }
 
@@ -470,7 +456,7 @@ export class Query<TData = unknown, TError = unknown, TQueryFnData = TData> {
       case 'failed':
         return {
           ...state,
-          failureCount: state.failureCount + 1,
+          fetchFailureCount: state.fetchFailureCount + 1,
         }
       case 'pause':
         return {
@@ -485,7 +471,7 @@ export class Query<TData = unknown, TError = unknown, TQueryFnData = TData> {
       case 'fetch':
         return {
           ...state,
-          failureCount: 0,
+          fetchFailureCount: 0,
           fetchMeta: action.meta,
           isFetching: true,
           isPaused: false,
@@ -496,21 +482,21 @@ export class Query<TData = unknown, TError = unknown, TQueryFnData = TData> {
           ...state,
           data: action.data,
           dataUpdateCount: state.dataUpdateCount + 1,
+          dataUpdatedAt: action.updatedAt ?? Date.now(),
           error: null,
-          failureCount: 0,
+          fetchFailureCount: 0,
           isFetching: false,
           isInvalidated: false,
           isPaused: false,
           status: 'success',
-          updatedAt: action.updatedAt ?? Date.now(),
         }
       case 'error':
         const error = action.error as unknown
 
         if (isCancelledError(error) && error.revert) {
           return {
             ...state,
-            failureCount: 0,
+            fetchFailureCount: 0,
             isFetching: false,
             isPaused: false,
             status: state.status === 'loading' ? 'idle' : state.status,
@@ -521,7 +507,8 @@ export class Query<TData = unknown, TError = unknown, TQueryFnData = TData> {
           ...state,
           error: error as TError,
           errorUpdateCount: state.errorUpdateCount + 1,
-          failureCount: state.failureCount + 1,
+          errorUpdatedAt: Date.now(),
+          fetchFailureCount: state.fetchFailureCount + 1,
           isFetching: false,
           isPaused: false,
           status: 'error',

src/core/queryObserver.ts

@@ -94,12 +94,28 @@ export class QueryObserver<
   willFetchOnMount(): boolean {
     return (
       this.options.enabled !== false &&
-      (!this.currentQuery.state.updatedAt ||
+      (!this.currentQuery.state.dataUpdatedAt ||
         this.options.refetchOnMount === 'always' ||
         (this.options.refetchOnMount !== false && this.isStale()))
     )
   }
 
+  willFetchOnReconnect(): boolean {
+    return (
+      this.options.enabled !== false &&
+      (this.options.refetchOnReconnect === 'always' ||
+        (this.options.refetchOnReconnect !== false && this.isStale()))
+    )
+  }
+
+  willFetchOnWindowFocus(): boolean {
+    return (
+      this.options.enabled !== false &&
+      (this.options.refetchOnWindowFocus === 'always' ||
+        (this.options.refetchOnWindowFocus !== false && this.isStale()))
+    )
+  }
+
   private willFetchOptionally(): boolean {
     return this.options.enabled !== false && this.isStale()
   }
@@ -304,10 +320,11 @@ export class QueryObserver<
     willFetch?: boolean
   ): QueryObserverResult<TData, TError> {
     const { state } = this.currentQuery
-    let { status, isFetching, updatedAt } = state
+    let { isFetching, status } = state
     let isPreviousData = false
     let isPlaceholderData = false
     let data: TData | undefined
+    let updatedAt = state.dataUpdatedAt
 
     // Optimistically set status to loading if we will start fetching
     if (willFetch) {
@@ -366,7 +383,7 @@ export class QueryObserver<
       ...getStatusProps(status),
       data,
       error: state.error,
-      failureCount: state.failureCount,
+      failureCount: state.fetchFailureCount,
       isFetched: state.dataUpdateCount > 0,
       isFetchedAfterMount: state.dataUpdateCount > this.initialDataUpdateCount,
       isFetching,

src/hydration/hydration.ts

@@ -154,7 +154,7 @@ export function hydrate(
 
     // Do not hydrate if an existing query exists with newer data
     if (query) {
-      if (query.state.updatedAt < dehydratedQuery.state.updatedAt) {
+      if (query.state.dataUpdatedAt < dehydratedQuery.state.dataUpdatedAt) {
         query.setState(dehydratedQuery.state)
       }
       return