feat: add additional notify flags

Author: boschni

docs/src/pages/reference/useQuery.md

@@ -26,6 +26,8 @@ const {
   initialData,
   isDataEqual,
   keepPreviousData,
+  notifyOnFetchChange,
+  notifyOnStaleChange,
   notifyOnStatusChange,
   onError,
   onSettled,
@@ -108,9 +110,17 @@ 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 only re-render when there are changes to `data` or `error`.
+  - Set this to `false` to prevent re-renders when the `status` property changes.
   - Defaults to `true`.
 - `onSuccess: (data: TData) => void`
   - Optional

src/core/queryObserver.ts

@@ -199,9 +199,10 @@ export class QueryObserver<
   protected fetch(
     fetchOptions?: ObserverFetchOptions
   ): Promise<QueryObserverResult<TData, TError>> {
-    const promise = this.getNextResult(fetchOptions)
-    this.executeFetch(fetchOptions)
-    return promise
+    return this.executeFetch(fetchOptions).then(() => {
+      this.updateResult()
+      return this.currentResult
+    })
   }
 
   private optionalFetch(): void {
@@ -210,12 +211,14 @@ export class QueryObserver<
     }
   }
 
-  private executeFetch(fetchOptions?: ObserverFetchOptions): void {
+  private executeFetch(
+    fetchOptions?: ObserverFetchOptions
+  ): Promise<TQueryData | undefined> {
     // Make sure we reference the latest query as the current one might have been removed
     this.updateQuery()
 
     // Fetch
-    this.currentQuery
+    return this.currentQuery
       .fetch(
         this.options as QueryOptions<TQueryData, TError, TQueryFnData>,
         fetchOptions
@@ -443,11 +446,19 @@ export class QueryObserver<
     }
 
     if (
-      // Always notify if notifyOnStatusChange is set
-      this.options.notifyOnStatusChange !== false ||
-      // Otherwise only notify on data or error change
+      // Always notify on data or error changes
       currentResult.data !== prevResult.data ||
-      currentResult.error !== prevResult.error
+      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)
     ) {
       notifyOptions.listeners = true
     }

src/core/types.ts

@@ -125,8 +125,17 @@ export interface QueryObserverOptions<
    */
   refetchOnMount?: boolean | 'always'
   /**
-   * 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.
+   * 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.
    * Defaults to `true`.
    */
   notifyOnStatusChange?: boolean

src/react/tests/useInfiniteQuery.test.tsx

@@ -41,7 +41,16 @@ const fetchItems = async (
 
 describe('useInfiniteQuery', () => {
   const queryCache = new QueryCache()
-  const queryClient = new QueryClient({ queryCache })
+  const queryClient = new QueryClient({
+    queryCache,
+    defaultOptions: {
+      queries: {
+        notifyOnFetchChange: true,
+        notifyOnStaleChange: true,
+        notifyOnStatusChange: true,
+      },
+    },
+  })
 
   it('should return the correct states for a successful query', async () => {
     const key = queryKey()
@@ -624,7 +633,7 @@ describe('useInfiniteQuery', () => {
 
     await sleep(300)
 
-    expect(states.length).toBe(5)
+    expect(states.length).toBe(4)
     expect(states[0]).toMatchObject({
       hasNextPage: undefined,
       data: undefined,
@@ -647,13 +656,6 @@ 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

@@ -14,7 +14,16 @@ import { useQuery, QueryClient, UseQueryResult, QueryCache } from '../..'
 
 describe('useQuery', () => {
   const queryCache = new QueryCache()
-  const queryClient = new QueryClient({ queryCache })
+  const queryClient = new QueryClient({
+    queryCache,
+    defaultOptions: {
+      queries: {
+        notifyOnFetchChange: true,
+        notifyOnStaleChange: true,
+        notifyOnStatusChange: true,
+      },
+    },
+  })
 
   it('should return the correct types', () => {
     const key = queryKey()
@@ -508,13 +517,15 @@ describe('useQuery', () => {
     expect(states[1]).toMatchObject({ data: 'test' })
   })
 
-  it('should not re-render when notifyOnStatusChange is false and the selected data did not change', async () => {
+  it('should not re-render when notify flags are false and the selected data did not change', async () => {
     const key = queryKey()
     const states: UseQueryResult<string>[] = []
 
     function Page() {
       const state = useQuery(key, () => ({ name: 'test' }), {
         select: data => data.name,
+        notifyOnFetchChange: false,
+        notifyOnStaleChange: false,
         notifyOnStatusChange: false,
       })
 
@@ -1353,7 +1364,7 @@ describe('useQuery', () => {
     expect(fn).toHaveBeenCalledTimes(5)
   })
 
-  it('should not re-render when a query status changes and notifyOnStatusChange is false', async () => {
+  it('should not re-render when a query status changes and notify flags are false', async () => {
     const key = queryKey()
     const states: UseQueryResult<string>[] = []
 
@@ -1366,6 +1377,8 @@ describe('useQuery', () => {
         },
         {
           notifyOnStatusChange: false,
+          notifyOnFetchChange: false,
+          notifyOnStaleChange: false,
         }
       )