fix(queryObserver): defer tracking of error prop when useErrorBoundary is on (#3087)

adding "error" to the list of tracked properties will result in us _only_ tracking error if we want to track all properties implicitly by _not_ observing any properties (because we check for trackedProps.size). Moving the adding of "error" to _after_ the size check fixes this

Author: TkDodo

src/core/queryObserver.ts

@@ -1,4 +1,4 @@
-import { DefaultedQueryObserverOptions, RefetchPageFilters } from './types'
+import { RefetchPageFilters } from './types'
 import {
   isServer,
   isValidTimeout,
@@ -224,14 +224,7 @@ export class QueryObserver<
   }
 
   trackResult(
-    result: QueryObserverResult<TData, TError>,
-    defaultedOptions: DefaultedQueryObserverOptions<
-      TQueryFnData,
-      TError,
-      TData,
-      TQueryData,
-      TQueryKey
-    >
+    result: QueryObserverResult<TData, TError>
   ): QueryObserverResult<TData, TError> {
     const trackedResult = {} as QueryObserverResult<TData, TError>
 
@@ -246,10 +239,6 @@ export class QueryObserver<
       })
     })
 
-    if (defaultedOptions.useErrorBoundary) {
-      this.trackedProps.add('error')
-    }
-
     return trackedResult
   }
 
@@ -606,6 +595,10 @@ export class QueryObserver<
 
     const includedProps = new Set(notifyOnChangeProps ?? this.trackedProps)
 
+    if (this.options.useErrorBoundary) {
+      includedProps.add('error')
+    }
+
     return Object.keys(result).some(key => {
       const typedKey = key as keyof QueryObserverResult
       const changed = result[typedKey] !== prevResult[typedKey]

src/reactjs/tests/useQuery.test.tsx

@@ -2672,6 +2672,30 @@ describe('useQuery', () => {
     consoleMock.mockRestore()
   })
 
+  it('should update with data if we observe no properties and useErrorBoundary', async () => {
+    const key = queryKey()
+
+    let result: UseQueryResult<string> | undefined
+
+    function Page() {
+      const query = useQuery(key, () => Promise.resolve('data'), {
+        useErrorBoundary: true,
+      })
+
+      React.useEffect(() => {
+        result = query
+      })
+
+      return null
+    }
+
+    renderWithClient(queryClient, <Page />)
+
+    await sleep(10)
+
+    expect(result?.data).toBe('data')
+  })
+
   it('should set status to error instead of throwing when error should not be thrown', async () => {
     const key = queryKey()
     const consoleMock = mockConsoleError()

src/reactjs/useBaseQuery.ts

@@ -134,7 +134,7 @@ export function useBaseQuery<
 
   // Handle result property usage tracking
   if (!defaultedOptions.notifyOnChangeProps) {
-    result = observer.trackResult(result, defaultedOptions)
+    result = observer.trackResult(result)
   }
 
   return result