fix(query): updating with setQueryData should not affect fetchStatus (#3613)

queries can be fetching _while_ we are making a manual update are still fetching, so we have to set fields that affect the fetch conditionally (fetchStatus, fetchFailureCount)

Author: TkDodo

src/core/query.ts

@@ -98,7 +98,7 @@ interface SuccessAction<TData> {
   data: TData | undefined
   type: 'success'
   dataUpdatedAt?: number
-  notifySuccess?: boolean
+  manual?: boolean
 }
 
 interface ErrorAction<TError> {
@@ -195,10 +195,7 @@ export class Query<
     }
   }
 
-  setData(
-    data: TData,
-    options?: SetDataOptions & { notifySuccess: boolean }
-  ): TData {
+  setData(data: TData, options?: SetDataOptions & { manual: boolean }): TData {
     const prevData = this.state.data
 
     // Use prev data if an isDataEqual function is defined and returns `true`
@@ -214,7 +211,7 @@ export class Query<
       data,
       type: 'success',
       dataUpdatedAt: options?.updatedAt,
-      notifySuccess: options?.notifySuccess,
+      manual: options?.manual,
     })
 
     return data
@@ -538,10 +535,12 @@ export class Query<
             dataUpdateCount: state.dataUpdateCount + 1,
             dataUpdatedAt: action.dataUpdatedAt ?? Date.now(),
             error: null,
-            fetchFailureCount: 0,
             isInvalidated: false,
-            fetchStatus: 'idle',
             status: 'success',
+            ...(!action.manual && {
+              fetchStatus: 'idle',
+              fetchFailureCount: 0,
+            }),
           }
         case 'error':
           const error = action.error as unknown

src/core/queryClient.ts

@@ -143,7 +143,7 @@ export class QueryClient {
     const defaultedOptions = this.defaultQueryOptions(parsedOptions)
     return this.queryCache
       .build(this, defaultedOptions)
-      .setData(data, { ...options, notifySuccess: false })
+      .setData(data, { ...options, manual: true })
   }
 
   setQueriesData<TData>(

src/core/queryObserver.ts

@@ -650,7 +650,7 @@ export class QueryObserver<
     const notifyOptions: NotifyOptions = {}
 
     if (action.type === 'success') {
-      notifyOptions.onSuccess = action.notifySuccess ?? true
+      notifyOptions.onSuccess = !action.manual
     } else if (action.type === 'error' && !isCancelledError(action.error)) {
       notifyOptions.onError = true
     }

src/core/tests/queryClient.test.tsx

@@ -356,6 +356,29 @@ describe('queryClient', () => {
 
       expect(queryCache.find(key)!.state.data).toBe(newData)
     })
+
+    test('should not set isFetching to false', async () => {
+      const key = queryKey()
+      queryClient.prefetchQuery(key, async () => {
+        await sleep(10)
+        return 23
+      })
+      expect(queryClient.getQueryState(key)).toMatchObject({
+        data: undefined,
+        fetchStatus: 'fetching',
+      })
+      queryClient.setQueryData(key, 42)
+      expect(queryClient.getQueryState(key)).toMatchObject({
+        data: 42,
+        fetchStatus: 'fetching',
+      })
+      await waitFor(() =>
+        expect(queryClient.getQueryState(key)).toMatchObject({
+          data: 23,
+          fetchStatus: 'idle',
+        })
+      )
+    })
   })
 
   describe('setQueriesData', () => {