feat(QueryObserver): track queries as default

docs/src/pages/guides/migrating-to-react-query-4.md

@@ -14,6 +14,10 @@ With version [3.22.0](https://github.com/tannerlinsley/react-query/releases/tag/
 + import { dehydrate, hydrate, useHydrate, Hydrate } from 'react-query'
 ```
 
+### `notifyOnChangePropsExclusion` has been removed
+
+In v4, `notifyOnChangeProps` defaults to the `"tracked"` behavior of v3 instead of `undefined`. Now that `"tracked"` is the default behavior for v4, it no longer makes sense to include this config option.
+
 ### Consistent behavior for `cancelRefetch`
 
 The `cancelRefetch` can be passed to all functions that imperatively fetch a query, namely:

docs/src/pages/reference/QueryClient.md

@@ -91,7 +91,7 @@ try {
 
 **Options**
 
-The options for `fetchQuery` are exactly the same as those of [`useQuery`](./useQuery), except the following: `enabled, refetchInterval, refetchIntervalInBackground, refetchOnWindowFocus, refetchOnReconnect, notifyOnChangeProps, notifyOnChangePropsExclusions, onSuccess, onError, onSettled, useErrorBoundary, select, suspense, keepPreviousData, placeholderData`; which are strictly for useQuery and useInfiniteQuery. You can check the [source code](https://github.com/tannerlinsley/react-query/blob/361935a12cec6f36d0bd6ba12e84136c405047c5/src/core/types.ts#L83) for more clarity.
+The options for `fetchQuery` are exactly the same as those of [`useQuery`](./useQuery), except the following: `enabled, refetchInterval, refetchIntervalInBackground, refetchOnWindowFocus, refetchOnReconnect, notifyOnChangeProps, onSuccess, onError, onSettled, useErrorBoundary, select, suspense, keepPreviousData, placeholderData`; which are strictly for useQuery and useInfiniteQuery. You can check the [source code](https://github.com/tannerlinsley/react-query/blob/361935a12cec6f36d0bd6ba12e84136c405047c5/src/core/types.ts#L83) for more clarity.
 
 **Returns**
 

docs/src/pages/reference/useQuery.md

@@ -35,7 +35,6 @@ const {
   keepPreviousData,
   meta,
   notifyOnChangeProps,
-  notifyOnChangePropsExclusions,
   onError,
   onSettled,
   onSuccess,
@@ -131,10 +130,6 @@ const result = useQuery({
   - If set, the component will only re-render if any of the listed properties change.
   - If set to `['data', 'error']` for example, the component will only re-render when the `data` or `error` properties change.
   - If set to `"tracked"`, access to properties will be tracked, and the component will only re-render when one of the tracked properties change.
-- `notifyOnChangePropsExclusions: string[]`
-  - Optional
-  - If set, the component will not re-render if any of the listed properties change.
-  - If set to `['isStale']` for example, the component will not re-render when the `isStale` property changes.
 - `onSuccess: (data: TData) => void`
   - Optional
   - This function will fire any time the query successfully fetches new data or the cache is updated via `setQueryData`.

src/core/queryObserver.ts

@@ -596,27 +596,23 @@ export class QueryObserver<
       return true
     }
 
-    const { notifyOnChangeProps, notifyOnChangePropsExclusions } = this.options
+    const { notifyOnChangeProps } = this.options
 
-    if (!notifyOnChangeProps && !notifyOnChangePropsExclusions) {
+    if (notifyOnChangeProps === 'all') {
       return true
     }
 
-    if (notifyOnChangeProps === 'tracked' && !this.trackedProps.length) {
+    if (!notifyOnChangeProps && !this.trackedProps.length) {
       return true
     }
 
-    const includedProps =
-      notifyOnChangeProps === 'tracked'
-        ? this.trackedProps
-        : notifyOnChangeProps
+    const includedProps = notifyOnChangeProps ?? this.trackedProps
 
     return Object.keys(result).some(key => {
       const typedKey = key as keyof QueryObserverResult
       const changed = result[typedKey] !== prevResult[typedKey]
       const isIncluded = includedProps?.some(x => x === key)
-      const isExcluded = notifyOnChangePropsExclusions?.some(x => x === key)
-      return changed && !isExcluded && (!includedProps || isIncluded)
+      return changed && (!includedProps || isIncluded)
     })
   }
 

src/core/types.ts

@@ -160,11 +160,7 @@ export interface QueryObserverOptions<
    * When set to `['data', 'error']`, the component will only re-render when the `data` or `error` properties change.
    * When set to `tracked`, access to properties will be tracked, and the component will only re-render when one of the tracked properties change.
    */
-  notifyOnChangeProps?: Array<keyof InfiniteQueryObserverResult> | 'tracked'
-  /**
-   * If set, the component will not re-render if any of the listed properties change.
-   */
-  notifyOnChangePropsExclusions?: Array<keyof InfiniteQueryObserverResult>
+  notifyOnChangeProps?: Array<keyof InfiniteQueryObserverResult> | 'all'
   /**
    * This callback will fire any time the query successfully fetches new data or the cache is updated via `setQueryData`.
    */

src/reactjs/tests/QueryResetErrorBoundary.test.tsx

@@ -34,6 +34,7 @@ describe('QueryErrorResetBoundary', () => {
         {
           retry: false,
           useErrorBoundary: true,
+          notifyOnChangeProps: 'all',
         }
       )
       return <div>{data}</div>
@@ -160,6 +161,7 @@ describe('QueryErrorResetBoundary', () => {
           retry: false,
           enabled,
           useErrorBoundary: true,
+          notifyOnChangeProps: 'all',
         }
       )
 
@@ -283,6 +285,7 @@ describe('QueryErrorResetBoundary', () => {
         {
           retry: false,
           useErrorBoundary: true,
+          notifyOnChangeProps: 'all',
         }
       )
       return <div>{data}</div>
@@ -342,6 +345,7 @@ describe('QueryErrorResetBoundary', () => {
           retry: false,
           useErrorBoundary: true,
           initialData: 'initial',
+          notifyOnChangeProps: 'all',
         }
       )
       return <div>{data}</div>
@@ -402,6 +406,7 @@ describe('QueryErrorResetBoundary', () => {
         {
           retry: false,
           useErrorBoundary: true,
+          notifyOnChangeProps: 'all',
         }
       )
       return <div>{data}</div>
@@ -465,6 +470,7 @@ describe('QueryErrorResetBoundary', () => {
         {
           retry: false,
           useErrorBoundary: true,
+          notifyOnChangeProps: 'all',
         }
       )
       return <div>{data}</div>

src/reactjs/tests/useInfiniteQuery.test.tsx

@@ -186,6 +186,7 @@ describe('useInfiniteQuery', () => {
         {
           getNextPageParam: () => 1,
           keepPreviousData: true,
+          notifyOnChangeProps: 'all',
         }
       )
 
@@ -306,6 +307,7 @@ describe('useInfiniteQuery', () => {
             pages: [...data.pages].reverse(),
             pageParams: [...data.pageParams].reverse(),
           }),
+          notifyOnChangeProps: 'all',
         }
       )
 
@@ -359,6 +361,7 @@ describe('useInfiniteQuery', () => {
         },
         {
           getPreviousPageParam: firstPage => firstPage - 1,
+          notifyOnChangeProps: 'all',
         }
       )
 
@@ -423,8 +426,10 @@ describe('useInfiniteQuery', () => {
     const states: UseInfiniteQueryResult<number>[] = []
 
     function Page() {
-      const state = useInfiniteQuery(key, ({ pageParam = 10 }) =>
-        Number(pageParam)
+      const state = useInfiniteQuery(
+        key,
+        ({ pageParam = 10 }) => Number(pageParam),
+        { notifyOnChangeProps: 'all' }
       )
 
       states.push(state)
@@ -516,6 +521,7 @@ describe('useInfiniteQuery', () => {
         {
           getPreviousPageParam: firstPage => firstPage - 1,
           getNextPageParam: lastPage => lastPage + 1,
+          notifyOnChangeProps: 'all',
         }
       )
 
@@ -608,6 +614,7 @@ describe('useInfiniteQuery', () => {
         ({ pageParam = 10 }) => Number(pageParam) * multiplier.current,
         {
           getNextPageParam: lastPage => lastPage + 1,
+          notifyOnChangeProps: 'all',
         }
       )
 
@@ -687,6 +694,7 @@ describe('useInfiniteQuery', () => {
         },
         {
           getNextPageParam: lastPage => lastPage + 1,
+          notifyOnChangeProps: 'all',
         }
       )
 
@@ -913,6 +921,7 @@ describe('useInfiniteQuery', () => {
         },
         {
           getNextPageParam: lastPage => lastPage + 1,
+          notifyOnChangeProps: 'all',
         }
       )
 
@@ -1014,6 +1023,7 @@ describe('useInfiniteQuery', () => {
         },
         {
           getNextPageParam: lastPage => lastPage + 1,
+          notifyOnChangeProps: 'all',
         }
       )
 
@@ -1080,6 +1090,7 @@ describe('useInfiniteQuery', () => {
         },
         {
           getNextPageParam: lastPage => lastPage + 1,
+          notifyOnChangeProps: 'all',
         }
       )
 
@@ -1169,6 +1180,7 @@ describe('useInfiniteQuery', () => {
         {
           initialData: { pages: [1], pageParams: [1] },
           getNextPageParam: lastPage => lastPage + 1,
+          notifyOnChangeProps: 'all',
         }
       )