fix(useInfiniteQuery): fix infinite re-renders when select produced a new result (TanStack#3081)

* fix(useInfiniteQuery): fix infinite re-renders when select produced a new result

by correctly forwarding notifyOptions

* fix(useInfiniteQuery): fix suspense test

asserting the length of 3 seems wrong here and was likely only necessary because we triggered one too many re-renders before this fix :)

Author: TkDodo

src/core/infiniteQueryObserver.ts

@@ -6,7 +6,11 @@ import type {
   InfiniteQueryObserverResult,
 } from './types'
 import type { QueryClient } from './queryClient'
-import { ObserverFetchOptions, QueryObserver } from './queryObserver'
+import {
+  NotifyOptions,
+  ObserverFetchOptions,
+  QueryObserver,
+} from './queryObserver'
 import {
   hasNextPage,
   hasPreviousPage,
@@ -67,12 +71,16 @@ export class InfiniteQueryObserver<
       TError,
       TData,
       TQueryData
-    >
+    >,
+    notifyOptions?: NotifyOptions
   ): void {
-    super.setOptions({
-      ...options,
-      behavior: infiniteQueryBehavior(),
-    })
+    super.setOptions(
+      {
+        ...options,
+        behavior: infiniteQueryBehavior(),
+      },
+      notifyOptions
+    )
   }
 
   getOptimisticResult(

src/react/tests/suspense.test.tsx

@@ -103,8 +103,8 @@ describe("useQuery's in Suspense mode", () => {
     fireEvent.click(rendered.getByText('next'))
     await sleep(10)
 
-    expect(states.length).toBe(3)
-    expect(states[2]).toMatchObject({
+    expect(states.length).toBe(2)
+    expect(states[1]).toMatchObject({
       data: { pages: [2], pageParams: [undefined] },
       status: 'success',
     })

src/react/tests/useInfiniteQuery.test.tsx

@@ -15,6 +15,7 @@ import {
   QueryClient,
   QueryCache,
   QueryFunctionContext,
+  InfiniteData,
 } from '../..'
 
 interface Result {
@@ -293,6 +294,41 @@ describe('useInfiniteQuery', () => {
     })
   })
 
+  it('should be able to select a new result and not cause infinite renders', async () => {
+    const key = queryKey()
+    const states: UseInfiniteQueryResult<{ count: number; id: number }>[] = []
+    let selectCalled = 0
+
+    function Page() {
+      const state = useInfiniteQuery(key, () => ({ count: 1 }), {
+        select: React.useCallback((data: InfiniteData<{ count: number }>) => {
+          selectCalled++
+          return {
+            pages: data.pages.map(x => ({ ...x, id: Math.random() })),
+            pageParams: data.pageParams,
+          }
+        }, []),
+      })
+      states.push(state)
+      return null
+    }
+
+    renderWithClient(queryClient, <Page />)
+
+    await sleep(20)
+
+    expect(states.length).toBe(2)
+    expect(selectCalled).toBe(1)
+    expect(states[0]).toMatchObject({
+      data: undefined,
+      isSuccess: false,
+    })
+    expect(states[1]).toMatchObject({
+      data: { pages: [{ count: 1 }] },
+      isSuccess: true,
+    })
+  })
+
   it('should be able to reverse the data', async () => {
     const key = queryKey()
     const states: UseInfiniteQueryResult<number>[] = []