fix(query-core): race condition in StrictMode (#9565)

Author: TkDodo

packages/query-core/src/query.ts

@@ -376,7 +376,13 @@ export class Query<
     options?: QueryOptions<TQueryFnData, TError, TData, TQueryKey>,
     fetchOptions?: FetchOptions<TQueryFnData>,
   ): Promise<TData> {
-    if (this.state.fetchStatus !== 'idle') {
+    if (
+      this.state.fetchStatus !== 'idle' &&
+      // If the promise in the retyer is already rejected, we have to definitely
+      // re-start the fetch; there is a chance that the query is still in a
+      // pending state when that happens
+      this.#retryer?.status() !== 'rejected'
+    ) {
       if (this.state.data !== undefined && fetchOptions?.cancelRefetch) {
         // Silently cancel current fetch if the user wants to cancel refetch
         this.cancel({ silent: true })

packages/query-core/src/retryer.ts

@@ -2,6 +2,7 @@ import { focusManager } from './focusManager'
 import { onlineManager } from './onlineManager'
 import { pendingThenable } from './thenable'
 import { isServer, sleep } from './utils'
+import type { Thenable } from './thenable'
 import type { CancelOptions, DefaultError, NetworkMode } from './types'
 
 // TYPES
@@ -27,6 +28,7 @@ export interface Retryer<TData = unknown> {
   continueRetry: () => void
   canStart: () => boolean
   start: () => Promise<TData>
+  status: () => 'pending' | 'resolved' | 'rejected'
 }
 
 export type RetryValue<TError> = boolean | number | ShouldRetryFunction<TError>
@@ -75,13 +77,15 @@ export function createRetryer<TData = unknown, TError = DefaultError>(
 ): Retryer<TData> {
   let isRetryCancelled = false
   let failureCount = 0
-  let isResolved = false
   let continueFn: ((value?: unknown) => void) | undefined
 
   const thenable = pendingThenable<TData>()
 
+  const isResolved = () =>
+    (thenable.status as Thenable<TData>['status']) !== 'pending'
+
   const cancel = (cancelOptions?: CancelOptions): void => {
-    if (!isResolved) {
+    if (!isResolved()) {
       reject(new CancelledError(cancelOptions))
 
       config.abort?.()
@@ -103,16 +107,14 @@ export function createRetryer<TData = unknown, TError = DefaultError>(
   const canStart = () => canFetch(config.networkMode) && config.canRun()
 
   const resolve = (value: any) => {
-    if (!isResolved) {
-      isResolved = true
+    if (!isResolved()) {
       continueFn?.()
       thenable.resolve(value)
     }
   }
 
   const reject = (value: any) => {
-    if (!isResolved) {
-      isResolved = true
+    if (!isResolved()) {
       continueFn?.()
       thenable.reject(value)
     }
@@ -121,14 +123,14 @@ export function createRetryer<TData = unknown, TError = DefaultError>(
   const pause = () => {
     return new Promise((continueResolve) => {
       continueFn = (value) => {
-        if (isResolved || canContinue()) {
+        if (isResolved() || canContinue()) {
           continueResolve(value)
         }
       }
       config.onPause?.()
     }).then(() => {
       continueFn = undefined
-      if (!isResolved) {
+      if (!isResolved()) {
         config.onContinue?.()
       }
     })
@@ -137,7 +139,7 @@ export function createRetryer<TData = unknown, TError = DefaultError>(
   // Create loop function
   const run = () => {
     // Do nothing if already resolved
-    if (isResolved) {
+    if (isResolved()) {
       return
     }
 
@@ -158,7 +160,7 @@ export function createRetryer<TData = unknown, TError = DefaultError>(
       .then(resolve)
       .catch((error) => {
         // Stop if the fetch is already resolved
-        if (isResolved) {
+        if (isResolved()) {
           return
         }
 
@@ -203,6 +205,7 @@ export function createRetryer<TData = unknown, TError = DefaultError>(
 
   return {
     promise: thenable,
+    status: () => thenable.status,
     cancel,
     continue: () => {
       continueFn?.()