fix: only keep notify on stale option

Author: boschni

docs/src/pages/reference/useQuery.md

@@ -110,17 +110,13 @@ const result = useQuery({
   - If set to `true`, the query will refetch on reconnect if the data is stale.
   - If set to `false`, the query will not refetch on reconnect.
   - If set to `"always"`, the query will always refetch on reconnect.
-- `notifyOnFetchChange: boolean`
-  - Optional
-  - Set this to `false` to prevent re-renders when the `isFetching` or `failureCount` properties change.
-  - Defaults to `true`.
 - `notifyOnStaleChange: boolean`
   - Optional
   - Set this to `true` to re-render when the `isStale` property changes.
   - Defaults to `false`.
 - `notifyOnStatusChange: boolean`
   - Optional
-  - Set this to `false` to prevent re-renders when the `status` property changes.
+  - Set this to `false` to only re-render when there are changes to `data` or `error`.
   - Defaults to `true`.
 - `onSuccess: (data: TData) => void`
   - Optional

src/core/queryObserver.ts

@@ -249,7 +249,10 @@ export class QueryObserver<
     this.staleTimeoutId = setTimeout(() => {
       if (!this.currentResult.isStale) {
         this.updateResult()
-        this.notify({ listeners: true, cache: true })
+        this.notify({
+          listeners: this.options.notifyOnStaleChange === true,
+          cache: true,
+        })
       }
     }, timeout)
   }
@@ -446,19 +449,11 @@ export class QueryObserver<
     }
 
     if (
-      // Always notify on data or error changes
+      // Always notify if notifyOnStatusChange is set
+      this.options.notifyOnStatusChange !== false ||
+      // Otherwise only notify on data or error change
       currentResult.data !== prevResult.data ||
-      currentResult.error !== prevResult.error ||
-      // Maybe notify on status change
-      (this.options.notifyOnStatusChange !== false &&
-        currentResult.status !== prevResult.status) ||
-      // Maybe notify on fetch change
-      (this.options.notifyOnFetchChange !== false &&
-        (currentResult.isFetching !== prevResult.isFetching ||
-          currentResult.failureCount !== prevResult.failureCount)) ||
-      // Maybe notify on stale change
-      (this.options.notifyOnStaleChange &&
-        currentResult.isStale !== prevResult.isStale)
+      currentResult.error !== prevResult.error
     ) {
       notifyOptions.listeners = true
     }

src/core/tests/queryCache.test.tsx

@@ -584,7 +584,10 @@ describe('queryCache', () => {
     const key = queryKey()
     const queryFn = jest.fn()
     const testCache = new QueryCache()
-    const testClient = new QueryClient({ queryCache: testCache })
+    const testClient = new QueryClient({
+      queryCache: testCache,
+      defaultOptions: { queries: { notifyOnStaleChange: true } },
+    })
     const observer = new QueryObserver(testClient, {
       queryKey: key,
       enabled: false,

src/core/types.ts

@@ -124,18 +124,14 @@ export interface QueryObserverOptions<
    * Defaults to `true`.
    */
   refetchOnMount?: boolean | 'always'
-  /**
-   * Whether a component should re-render when the `isFetching` or `failureCount` properties change.
-   * Defaults to `true`.
-   */
-  notifyOnFetchChange?: boolean
   /**
    * Whether a component should re-render when the `isStale` property changes.
    * Defaults to `false`.
    */
   notifyOnStaleChange?: boolean
   /**
-   * Whether a component should re-render when the `status` property changes.
+   * Whether a change to the query status should re-render a component.
+   * If set to `false`, the component will only re-render when the actual `data` or `error` changes.
    * Defaults to `true`.
    */
   notifyOnStatusChange?: boolean

src/react/tests/useInfiniteQuery.test.tsx

@@ -45,9 +45,7 @@ describe('useInfiniteQuery', () => {
     queryCache,
     defaultOptions: {
       queries: {
-        notifyOnFetchChange: true,
         notifyOnStaleChange: true,
-        notifyOnStatusChange: true,
       },
     },
   })
@@ -633,7 +631,7 @@ describe('useInfiniteQuery', () => {
 
     await sleep(300)
 
-    expect(states.length).toBe(4)
+    expect(states.length).toBe(5)
     expect(states[0]).toMatchObject({
       hasNextPage: undefined,
       data: undefined,
@@ -656,6 +654,13 @@ describe('useInfiniteQuery', () => {
       isSuccess: true,
     })
     expect(states[3]).toMatchObject({
+      hasNextPage: true,
+      data: { pages: [10] },
+      isFetching: true,
+      isFetchingNextPage: true,
+      isSuccess: true,
+    })
+    expect(states[4]).toMatchObject({
       hasNextPage: true,
       data: { pages: [10, 11] },
       isFetching: false,

src/react/tests/useQuery.test.tsx

@@ -18,9 +18,7 @@ describe('useQuery', () => {
     queryCache,
     defaultOptions: {
       queries: {
-        notifyOnFetchChange: true,
         notifyOnStaleChange: true,
-        notifyOnStatusChange: true,
       },
     },
   })
@@ -524,7 +522,6 @@ describe('useQuery', () => {
     function Page() {
       const state = useQuery(key, () => ({ name: 'test' }), {
         select: data => data.name,
-        notifyOnFetchChange: false,
         notifyOnStaleChange: false,
         notifyOnStatusChange: false,
       })
@@ -1377,7 +1374,6 @@ describe('useQuery', () => {
         },
         {
           notifyOnStatusChange: false,
-          notifyOnFetchChange: false,
           notifyOnStaleChange: false,
         }
       )