@tanstack/react-query 4.29.23 → 4.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query",
-  "version": "4.29.23",
+  "version": "4.30.0",
   "description": "Hooks for managing, caching and syncing asynchronous and remote data in React",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -47,7 +47,7 @@
   },
   "dependencies": {
     "use-sync-external-store": "^1.2.0",
-    "@tanstack/query-core": "4.29.23"
+    "@tanstack/query-core": "4.30.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",

package/src/Hydrate.tsx

@@ -1,9 +1,9 @@
 'use client'
 import * as React from 'react'
 
-import type { HydrateOptions } from '@tanstack/query-core'
 import { hydrate } from '@tanstack/query-core'
 import { useQueryClient } from './QueryClientProvider'
+import type { HydrateOptions } from '@tanstack/query-core'
 import type { ContextOptions } from './types'
 
 export function useHydrate(

package/src/__tests__/Hydrate.test.tsx

@@ -1,17 +1,17 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 
+import * as coreModule from '@tanstack/query-core'
 import {
+  Hydrate,
+  QueryCache,
   QueryClient,
   QueryClientProvider,
-  QueryCache,
-  useQuery,
   dehydrate,
   useHydrate,
-  Hydrate,
+  useQuery,
 } from '@tanstack/react-query'
 import { createQueryClient, sleep } from './utils'
-import * as coreModule from '@tanstack/query-core'
 
 describe('React hydration', () => {
   const fetchData: (value: string) => Promise<string> = (value) =>

package/src/__tests__/QueryClientProvider.test.tsx

@@ -2,14 +2,14 @@ import * as React from 'react'
 import { render, waitFor } from '@testing-library/react'
 import { renderToString } from 'react-dom/server'
 
-import { sleep, queryKey, createQueryClient } from './utils'
 import {
+  QueryCache,
   QueryClient,
   QueryClientProvider,
-  QueryCache,
   useQuery,
   useQueryClient,
 } from '..'
+import { createQueryClient, queryKey, sleep } from './utils'
 
 describe('QueryClientProvider', () => {
   test('sets a specific cache for all queries to use', async () => {

package/src/__tests__/QueryResetErrorBoundary.test.tsx

@@ -2,8 +2,8 @@ import { fireEvent, waitFor } from '@testing-library/react'
 import { ErrorBoundary } from 'react-error-boundary'
 import * as React from 'react'
 
-import { createQueryClient, queryKey, renderWithClient, sleep } from './utils'
 import { QueryCache, QueryErrorResetBoundary, useQueries, useQuery } from '..'
+import { createQueryClient, queryKey, renderWithClient, sleep } from './utils'
 
 // TODO: This should be removed with the types for react-error-boundary get updated.
 declare module 'react-error-boundary' {

package/src/__tests__/ssr-hydration.test.tsx

@@ -6,11 +6,11 @@ import ReactDOMServer from 'react-dom/server'
 import type {} from 'react-dom/next'
 
 import {
-  useQuery,
-  QueryClientProvider,
   QueryCache,
+  QueryClientProvider,
   dehydrate,
   hydrate,
+  useQuery,
 } from '..'
 import { createQueryClient, setIsServer, sleep } from './utils'
 

package/src/__tests__/ssr.test.tsx

@@ -6,8 +6,8 @@ import * as React from 'react'
 // @ts-ignore
 import { renderToString } from 'react-dom/server'
 
-import { sleep, queryKey, createQueryClient } from './utils'
-import { useQuery, QueryClientProvider, QueryCache, useInfiniteQuery } from '..'
+import { QueryCache, QueryClientProvider, useInfiniteQuery, useQuery } from '..'
+import { createQueryClient, queryKey, sleep } from './utils'
 
 describe('Server Side Rendering', () => {
   it('should not trigger fetch', () => {

package/src/__tests__/suspense.test.tsx

@@ -1,7 +1,6 @@
 import { fireEvent, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
-import type { UseInfiniteQueryResult, UseQueryResult } from '..'
 import {
   QueryCache,
   QueryErrorResetBoundary,
@@ -11,6 +10,7 @@ import {
   useQueryErrorResetBoundary,
 } from '..'
 import { createQueryClient, queryKey, renderWithClient, sleep } from './utils'
+import type { UseInfiniteQueryResult, UseQueryResult } from '..'
 
 describe("useQuery's in Suspense mode", () => {
   const queryCache = new QueryCache()

package/src/__tests__/useInfiniteQuery.test.tsx

@@ -1,6 +1,7 @@
 import { fireEvent, waitFor } from '@testing-library/react'
 import * as React from 'react'
 
+import { QueryCache, useInfiniteQuery } from '..'
 import {
   createQueryClient,
   queryKey,
@@ -13,7 +14,6 @@ import type {
   QueryFunctionContext,
   UseInfiniteQueryResult,
 } from '..'
-import { QueryCache, useInfiniteQuery } from '..'
 
 interface Result {
   items: number[]

package/src/__tests__/useIsFetching.test.tsx

@@ -2,6 +2,7 @@ import { fireEvent, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
 
+import { QueryCache, useIsFetching, useQuery } from '..'
 import {
   createQueryClient,
   queryKey,
@@ -10,7 +11,6 @@ import {
   sleep,
 } from './utils'
 import type { QueryClient } from '..'
-import { QueryCache, useIsFetching, useQuery } from '..'
 
 describe('useIsFetching', () => {
   // See https://github.com/tannerlinsley/react-query/issues/105

package/src/__tests__/useIsMutating.test.tsx

@@ -1,16 +1,16 @@
 import { fireEvent, waitFor } from '@testing-library/react'
 import * as React from 'react'
+import { ErrorBoundary } from 'react-error-boundary'
+import { QueryClient } from '@tanstack/query-core'
 import { useIsMutating } from '../useIsMutating'
 import { useMutation } from '../useMutation'
+import * as MutationCacheModule from '../../../query-core/src/mutationCache'
 import {
   createQueryClient,
   renderWithClient,
   setActTimeout,
   sleep,
 } from './utils'
-import { ErrorBoundary } from 'react-error-boundary'
-import { QueryClient } from '@tanstack/query-core'
-import * as MutationCacheModule from '../../../query-core/src/mutationCache'
 
 describe('useIsMutating', () => {
   it('should return the number of fetching mutations', async () => {

package/src/__tests__/useMutation.test.tsx

@@ -3,9 +3,7 @@ import '@testing-library/jest-dom'
 import * as React from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
 
-import type { QueryClient } from '..'
 import { MutationCache, QueryCache, useMutation } from '..'
-import type { UseMutationResult } from '../types'
 import {
   createQueryClient,
   mockNavigatorOnLine,
@@ -14,6 +12,8 @@ import {
   setActTimeout,
   sleep,
 } from './utils'
+import type { QueryClient } from '..'
+import type { UseMutationResult } from '../types'
 
 describe('useMutation', () => {
   const queryCache = new QueryCache()

package/src/__tests__/useQueries.test.tsx

@@ -4,6 +4,7 @@ import { ErrorBoundary } from 'react-error-boundary'
 
 import * as QueriesObserverModule from '../../../query-core/src/queriesObserver'
 
+import { QueriesObserver, QueryCache, useQueries } from '..'
 import {
   createQueryClient,
   expectType,
@@ -20,7 +21,6 @@ import type {
   UseQueryOptions,
   UseQueryResult,
 } from '..'
-import { QueriesObserver, QueryCache, useQueries } from '..'
 import type { QueryFunctionContext } from '@tanstack/query-core'
 
 describe('useQueries', () => {

package/src/__tests__/useQuery.test.tsx

@@ -1,6 +1,8 @@
 import { act, fireEvent, waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import * as React from 'react'
+import { ErrorBoundary } from 'react-error-boundary'
+import { QueryCache, useQuery } from '..'
 import {
   Blink,
   createQueryClient,
@@ -20,8 +22,6 @@ import type {
   UseQueryOptions,
   UseQueryResult,
 } from '..'
-import { QueryCache, useQuery } from '..'
-import { ErrorBoundary } from 'react-error-boundary'
 
 describe('useQuery', () => {
   const queryCache = new QueryCache()
@@ -1018,46 +1018,6 @@ describe('useQuery', () => {
     expect(states[1]).toMatchObject({ data: 'test' })
   })
 
-  it('should not re-render when it should only re-render only data change 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,
-        notifyOnChangeProps: ['data'],
-      })
-
-      states.push(state)
-
-      return (
-        <div>
-          <div>{state.data}</div>
-          <button onClick={() => state.refetch()}>refetch</button>
-        </div>
-      )
-    }
-
-    const rendered = renderWithClient(queryClient, <Page />)
-
-    await waitFor(() => {
-      rendered.getByText('test')
-    })
-
-    fireEvent.click(rendered.getByRole('button', { name: 'refetch' }))
-
-    await waitFor(() => {
-      rendered.getByText('test')
-    })
-
-    expect(states[0]).toMatchObject({ data: undefined })
-    expect(states[1]).toMatchObject({ data: 'test' })
-
-    // make sure no additional renders happen
-    await sleep(50)
-    expect(states.length).toBe(2)
-  })
-
   it('should throw an error when a selector throws', async () => {
     const key = queryKey()
     const states: UseQueryResult<string>[] = []
@@ -2223,60 +2183,267 @@ describe('useQuery', () => {
     expect(states[2]).toMatchObject({ isStale: true })
   })
 
-  it('should not re-render when it should only re-render on data changes and the data did not change', async () => {
-    const key = queryKey()
-    const states: UseQueryResult<string>[] = []
+  describe('notifyOnChangeProps', () => {
+    it('should not re-render when it should only re-render on data changes and the data did not change', async () => {
+      const key = queryKey()
+      const states: UseQueryResult<string>[] = []
 
-    function Page() {
-      const state = useQuery(
-        key,
-        async () => {
-          await sleep(5)
-          return 'test'
-        },
-        {
-          notifyOnChangeProps: ['data'],
-        },
-      )
+      function Page() {
+        const state = useQuery(
+          key,
+          async () => {
+            await sleep(5)
+            return 'test'
+          },
+          {
+            notifyOnChangeProps: ['data'],
+          },
+        )
 
-      states.push(state)
+        states.push(state)
 
-      return (
-        <>
-          <button
-            onClick={async () => {
-              await state.refetch()
-            }}
-          >
-            refetch
-          </button>
+        return (
+          <>
+            <button
+              onClick={async () => {
+                await state.refetch()
+              }}
+            >
+              refetch
+            </button>
 
-          <div>{state.data}</div>
-        </>
-      )
-    }
+            <div>{state.data}</div>
+          </>
+        )
+      }
 
-    const rendered = renderWithClient(queryClient, <Page />)
+      const rendered = renderWithClient(queryClient, <Page />)
 
-    await waitFor(() => {
-      rendered.getByText('test')
+      await waitFor(() => {
+        rendered.getByText('test')
+      })
+
+      fireEvent.click(rendered.getByRole('button', { name: 'refetch' }))
+
+      // sleep is required to make sure no additional renders happen after click
+      await sleep(20)
+
+      expect(states.length).toBe(2)
+      expect(states[0]).toMatchObject({
+        data: undefined,
+        status: 'loading',
+        isFetching: true,
+      })
+      expect(states[1]).toMatchObject({
+        data: 'test',
+        status: 'success',
+        isFetching: false,
+      })
     })
 
-    fireEvent.click(rendered.getByRole('button', { name: 'refetch' }))
+    it('should not re-render when it should only re-render only data change and the selected data did not change', async () => {
+      const key = queryKey()
+      const states: UseQueryResult<string>[] = []
 
-    // sleep is required to make sure no additional renders happen after click
-    await sleep(20)
+      function Page() {
+        const state = useQuery(key, () => ({ name: 'test' }), {
+          select: (data) => data.name,
+          notifyOnChangeProps: ['data'],
+        })
 
-    expect(states.length).toBe(2)
-    expect(states[0]).toMatchObject({
-      data: undefined,
-      status: 'loading',
-      isFetching: true,
+        states.push(state)
+
+        return (
+          <div>
+            <div>{state.data}</div>
+            <button onClick={() => state.refetch()}>refetch</button>
+          </div>
+        )
+      }
+
+      const rendered = renderWithClient(queryClient, <Page />)
+
+      await waitFor(() => {
+        rendered.getByText('test')
+      })
+
+      fireEvent.click(rendered.getByRole('button', { name: 'refetch' }))
+
+      await waitFor(() => {
+        rendered.getByText('test')
+      })
+
+      expect(states[0]).toMatchObject({ data: undefined })
+      expect(states[1]).toMatchObject({ data: 'test' })
+
+      // make sure no additional renders happen
+      await sleep(50)
+      expect(states.length).toBe(2)
     })
-    expect(states[1]).toMatchObject({
-      data: 'test',
-      status: 'success',
-      isFetching: false,
+
+    // See https://github.com/TanStack/query/discussions/5588
+    describe('function', () => {
+      it('should not re-render when it should only re-render on data changes and the data did not change', async () => {
+        const key = queryKey()
+        const states: UseQueryResult<string>[] = []
+
+        function Page() {
+          const state = useQuery(
+            key,
+            async () => {
+              await sleep(5)
+              return 'test'
+            },
+            {
+              notifyOnChangeProps: () => ['data'],
+            },
+          )
+
+          states.push(state)
+
+          return (
+            <>
+              <button
+                onClick={async () => {
+                  await state.refetch()
+                }}
+              >
+                refetch
+              </button>
+
+              <div>{state.data}</div>
+            </>
+          )
+        }
+
+        const rendered = renderWithClient(queryClient, <Page />)
+
+        await waitFor(() => {
+          rendered.getByText('test')
+        })
+
+        fireEvent.click(rendered.getByRole('button', { name: 'refetch' }))
+
+        // sleep is required to make sure no additional renders happen after click
+        await sleep(20)
+
+        expect(states.length).toBe(2)
+        expect(states[0]).toMatchObject({
+          data: undefined,
+          status: 'loading',
+          isFetching: true,
+        })
+        expect(states[1]).toMatchObject({
+          data: 'test',
+          status: 'success',
+          isFetching: false,
+        })
+      })
+
+      it('should not re-render when change props are not actively being tracked', async () => {
+        const key = queryKey()
+        const states: UseQueryResult<string>[] = []
+
+        function Page() {
+          const fetchCounterRef = React.useRef(0)
+          const trackChangesRef = React.useRef(true)
+
+          const notifyOnChangeProps = React.useCallback(() => {
+            return trackChangesRef.current ? 'all' : []
+          }, [])
+
+          const state = useQuery(
+            key,
+            async () => {
+              await sleep(5)
+              fetchCounterRef.current++
+              return `fetch counter: ${fetchCounterRef.current}`
+            },
+            {
+              notifyOnChangeProps,
+            },
+          )
+
+          states.push(state)
+
+          return (
+            <>
+              <button
+                onClick={async () => {
+                  await state.refetch()
+                }}
+              >
+                refetch
+              </button>
+              <button
+                onClick={() => {
+                  trackChangesRef.current = true
+                }}
+              >
+                enableTracking
+              </button>
+              <button
+                onClick={() => {
+                  trackChangesRef.current = false
+                }}
+              >
+                disableTracking
+              </button>
+
+              <div>{state.data}</div>
+            </>
+          )
+        }
+
+        const rendered = renderWithClient(queryClient, <Page />)
+        await waitFor(() => {
+          rendered.getByText('fetch counter: 1')
+        })
+
+        expect(states.length).toBe(2)
+        expect(states[0]).toMatchObject({
+          data: undefined,
+          isFetching: true,
+          status: 'loading',
+        })
+        expect(states[1]).toMatchObject({
+          data: 'fetch counter: 1',
+          status: 'success',
+          isFetching: false,
+        })
+
+        // disable tracking and refetch to check for re-renders
+        fireEvent.click(
+          rendered.getByRole('button', { name: 'disableTracking' }),
+        )
+        fireEvent.click(rendered.getByRole('button', { name: 'refetch' }))
+
+        // sleep is required to make sure no additional renders happen after click
+        await sleep(20)
+        // still expect to only have two re-renders from the initial fetch
+        expect(states.length).toBe(2)
+
+        // enable tracking and refetch to check for re-renders
+        fireEvent.click(
+          rendered.getByRole('button', { name: 'enableTracking' }),
+        )
+        fireEvent.click(rendered.getByRole('button', { name: 'refetch' }))
+
+        // sleep is required to make sure no additional renders happen after click
+        await sleep(20)
+
+        expect(states.length).toBe(4)
+        expect(states[2]).toMatchObject({
+          data: 'fetch counter: 2',
+          status: 'success',
+          isFetching: true,
+        })
+        expect(states[3]).toMatchObject({
+          data: 'fetch counter: 3',
+          status: 'success',
+          isFetching: false,
+        })
+      })
     })
   })
 

package/src/__tests__/utils.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react'
 import { act, render } from '@testing-library/react'
-import type { ContextOptions, QueryClientConfig, MutationOptions } from '..'
-import { QueryClient, QueryClientProvider } from '..'
 import * as utils from '@tanstack/query-core'
+import { QueryClient, QueryClientProvider } from '..'
+import type { ContextOptions, MutationOptions, QueryClientConfig } from '..'
 
 export function renderWithClient(
   client: QueryClient,

package/src/errorBoundaryUtils.ts

@@ -1,4 +1,6 @@
 'use client'
+import * as React from 'react'
+import { shouldThrowError } from './utils'
 import type {
   DefaultedQueryObserverOptions,
   Query,
@@ -7,8 +9,6 @@ import type {
   UseErrorBoundary,
 } from '@tanstack/query-core'
 import type { QueryErrorResetBoundaryValue } from './QueryErrorResetBoundary'
-import * as React from 'react'
-import { shouldThrowError } from './utils'
 
 export const ensurePreventErrorBoundaryRetry = <
   TQueryFnData,

package/src/reactBatchedUpdates.native.ts

@@ -1,4 +1,5 @@
 // @ts-ignore
 // eslint-disable-next-line import/no-unresolved
 import { unstable_batchedUpdates } from 'react-native'
+
 export { unstable_batchedUpdates }

package/src/reactBatchedUpdates.ts

@@ -1,3 +1,4 @@
 'use client'
 import * as ReactDOM from 'react-dom'
+
 export const unstable_batchedUpdates = ReactDOM.unstable_batchedUpdates

package/src/types.ts

@@ -2,15 +2,15 @@
 
 import type * as React from 'react'
 import type {
+  DefinedQueryObserverResult,
   InfiniteQueryObserverOptions,
   InfiniteQueryObserverResult,
+  MutateFunction,
+  MutationObserverOptions,
   MutationObserverResult,
+  QueryKey,
   QueryObserverOptions,
   QueryObserverResult,
-  QueryKey,
-  MutationObserverOptions,
-  MutateFunction,
-  DefinedQueryObserverResult,
 } from '@tanstack/query-core'
 import type { QueryClient } from '@tanstack/query-core'
 

package/src/useBaseQuery.ts

@@ -1,19 +1,19 @@
 'use client'
 import * as React from 'react'
-import { useSyncExternalStore } from './useSyncExternalStore'
 
-import type { QueryKey, QueryObserver } from '@tanstack/query-core'
 import { notifyManager } from '@tanstack/query-core'
+import { useSyncExternalStore } from './useSyncExternalStore'
 import { useQueryErrorResetBoundary } from './QueryErrorResetBoundary'
 import { useQueryClient } from './QueryClientProvider'
-import type { UseBaseQueryOptions } from './types'
 import { useIsRestoring } from './isRestoring'
 import {
   ensurePreventErrorBoundaryRetry,
   getHasError,
   useClearResetErrorBoundary,
 } from './errorBoundaryUtils'
-import { ensureStaleTime, shouldSuspend, fetchOptimistic } from './suspense'
+import { ensureStaleTime, fetchOptimistic, shouldSuspend } from './suspense'
+import type { QueryKey, QueryObserver } from '@tanstack/query-core'
+import type { UseBaseQueryOptions } from './types'
 
 export function useBaseQuery<
   TQueryFnData,