@tanstack/react-query 5.0.0-alpha.71 → 5.0.0-alpha.84

package/src/__tests__/useInfiniteQuery.test.tsx

@@ -1,6 +1,8 @@
 import { fireEvent, render, waitFor } from '@testing-library/react'
 import * as React from 'react'
 
+import { vi } from 'vitest'
+import { QueryCache, keepPreviousData, useInfiniteQuery } from '..'
 import {
   createQueryClient,
   queryKey,
@@ -13,8 +15,6 @@ import type {
   QueryFunctionContext,
   UseInfiniteQueryResult,
 } from '..'
-import { QueryCache, useInfiniteQuery, keepPreviousData } from '..'
-import { vi } from 'vitest'
 import type { Mock } from 'vitest'
 
 interface Result {
@@ -213,7 +213,7 @@ describe('useInfiniteQuery', () => {
 
     await waitFor(() => rendered.getByText('data: 0-asc'))
     await waitFor(() => rendered.getByText('isFetching: false'))
-    await waitFor(() => expect(states.length).toBe(7))
+    await waitFor(() => expect(states.length).toBe(6))
 
     expect(states[0]).toMatchObject({
       data: undefined,
@@ -251,15 +251,7 @@ describe('useInfiniteQuery', () => {
       isSuccess: true,
       isPlaceholderData: true,
     })
-    // Hook state update
     expect(states[5]).toMatchObject({
-      data: { pages: ['0-desc', '1-desc'] },
-      isFetching: true,
-      isFetchingNextPage: false,
-      isSuccess: true,
-      isPlaceholderData: true,
-    })
-    expect(states[6]).toMatchObject({
       data: { pages: ['0-asc'] },
       isFetching: false,
       isFetchingNextPage: false,
@@ -606,77 +598,47 @@ describe('useInfiniteQuery', () => {
 
   it('should silently cancel any ongoing fetch when fetching more', async () => {
     const key = queryKey()
-    const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []
 
     function Page() {
       const start = 10
-      const state = useInfiniteQuery({
-        queryKey: key,
-        queryFn: async ({ pageParam }) => {
-          await sleep(50)
-          return Number(pageParam)
-        },
-        defaultPageParam: start,
-        getNextPageParam: (lastPage) => lastPage + 1,
-        notifyOnChangeProps: 'all',
-      })
-
-      states.push(state)
-
-      const { refetch, fetchNextPage } = state
-
-      React.useEffect(() => {
-        setActTimeout(() => {
-          refetch()
-        }, 100)
-        setActTimeout(() => {
-          fetchNextPage()
-        }, 110)
-      }, [fetchNextPage, refetch])
+      const { data, fetchNextPage, refetch, status, fetchStatus } =
+        useInfiniteQuery({
+          queryKey: key,
+          queryFn: async ({ pageParam }) => {
+            await sleep(50)
+            return Number(pageParam)
+          },
+          defaultPageParam: start,
+          getNextPageParam: (lastPage) => lastPage + 1,
+        })
 
-      return null
+      return (
+        <div>
+          <button onClick={() => fetchNextPage()}>fetchNextPage</button>
+          <button onClick={() => refetch()}>refetch</button>
+          <div>data: {JSON.stringify(data)}</div>
+          <div>
+            status: {status}, {fetchStatus}
+          </div>
+        </div>
+      )
     }
 
-    renderWithClient(queryClient, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
-    await sleep(300)
+    await waitFor(() => rendered.getByText('status: success, idle'))
+    await waitFor(() =>
+      rendered.getByText('data: {"pages":[10],"pageParams":[10]}'),
+    )
 
-    expect(states.length).toBe(5)
-    expect(states[0]).toMatchObject({
-      hasNextPage: false,
-      data: undefined,
-      isFetching: true,
-      isFetchingNextPage: false,
-      isSuccess: false,
-    })
-    expect(states[1]).toMatchObject({
-      hasNextPage: true,
-      data: { pages: [10] },
-      isFetching: false,
-      isFetchingNextPage: false,
-      isSuccess: true,
-    })
-    expect(states[2]).toMatchObject({
-      hasNextPage: true,
-      data: { pages: [10] },
-      isFetching: true,
-      isFetchingNextPage: false,
-      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,
-      isFetchingNextPage: false,
-      isSuccess: true,
-    })
+    fireEvent.click(rendered.getByRole('button', { name: /refetch/i }))
+    await waitFor(() => rendered.getByText('status: success, fetching'))
+    fireEvent.click(rendered.getByRole('button', { name: /fetchNextPage/i }))
+
+    await waitFor(() => rendered.getByText('status: success, idle'))
+    await waitFor(() =>
+      rendered.getByText('data: {"pages":[10,11],"pageParams":[10,11]}'),
+    )
   })
 
   it('should silently cancel an ongoing fetchNextPage request when another fetchNextPage is invoked', async () => {

package/src/__tests__/useInfiniteQuery.type.test.tsx

@@ -1,9 +1,9 @@
-import type { InfiniteData } from '@tanstack/query-core'
 import { QueryClient } from '@tanstack/query-core'
 import { useInfiniteQuery } from '../useInfiniteQuery'
 import { useQuery } from '../useQuery'
-import type { Expect, Equal } from './utils'
 import { doNotExecute } from './utils'
+import type { Equal, Expect } from './utils'
+import type { InfiniteData } from '@tanstack/query-core'
 
 describe('pageParam', () => {
   it('defaultPageParam should define type of param passed to queryFunctionContext', () => {

package/src/__tests__/useIsFetching.test.tsx

@@ -1,6 +1,7 @@
 import { fireEvent, render, waitFor } from '@testing-library/react'
 import * as React from 'react'
 
+import { QueryCache, useIsFetching, useQuery } from '..'
 import {
   createQueryClient,
   queryKey,
@@ -8,7 +9,6 @@ import {
   setActTimeout,
   sleep,
 } from './utils'
-import { QueryCache, useIsFetching, useQuery } from '..'
 
 describe('useIsFetching', () => {
   // See https://github.com/tannerlinsley/react-query/issues/105

package/src/__tests__/useMutation.test.tsx

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

package/src/__tests__/useQueries.test.tsx

@@ -2,15 +2,7 @@ import { fireEvent, render, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
 
-import type { QueryFunctionContext } from '@tanstack/query-core'
 import { vi } from 'vitest'
-import type {
-  QueryFunction,
-  QueryKey,
-  QueryObserverResult,
-  UseQueryOptions,
-  UseQueryResult,
-} from '..'
 import { QueryCache, useQueries } from '..'
 import {
   createQueryClient,
@@ -20,6 +12,14 @@ import {
   renderWithClient,
   sleep,
 } from './utils'
+import type {
+  QueryFunction,
+  QueryKey,
+  QueryObserverResult,
+  UseQueryOptions,
+  UseQueryResult,
+} from '..'
+import type { QueryFunctionContext } from '@tanstack/query-core'
 
 describe('useQueries', () => {
   const queryCache = new QueryCache()

package/src/__tests__/useQuery.test.tsx

@@ -1,6 +1,9 @@
 import { act, fireEvent, render, waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import * as React from 'react'
+import { ErrorBoundary } from 'react-error-boundary'
+import { vi } from 'vitest'
+import { QueryCache, keepPreviousData, useQuery } from '..'
 import {
   Blink,
   createQueryClient,
@@ -19,9 +22,6 @@ import type {
   UseQueryOptions,
   UseQueryResult,
 } from '..'
-import { QueryCache, useQuery, keepPreviousData } from '..'
-import { ErrorBoundary } from 'react-error-boundary'
-import { vi } from 'vitest'
 import type { Mock } from 'vitest'
 
 describe('useQuery', () => {
@@ -693,17 +693,15 @@ describe('useQuery', () => {
     // required to make sure no additional renders are happening after data is successfully fetched for the second time
     await sleep(100)
 
-    expect(states.length).toBe(5)
+    expect(states.length).toBe(4)
     // First load
     expect(states[0]).toMatchObject({ isPending: true, isSuccess: false })
     // First success
     expect(states[1]).toMatchObject({ isPending: false, isSuccess: true })
     // Remove
     expect(states[2]).toMatchObject({ isPending: true, isSuccess: false })
-    // Hook state update
-    expect(states[3]).toMatchObject({ isPending: true, isSuccess: false })
     // Second success
-    expect(states[4]).toMatchObject({ isPending: false, isSuccess: true })
+    expect(states[3]).toMatchObject({ isPending: false, isSuccess: true })
   })
 
   it('should fetch when refetchOnMount is false and nothing has been fetched yet', async () => {
@@ -1716,7 +1714,7 @@ describe('useQuery', () => {
     act(() => rendered.rerender(<Page count={2} />))
     await waitFor(() => rendered.getByText('error: Error test'))
 
-    await waitFor(() => expect(states.length).toBe(8))
+    await waitFor(() => expect(states.length).toBe(6))
     // Initial
     expect(states[0]).toMatchObject({
       data: undefined,
@@ -1741,16 +1739,8 @@ describe('useQuery', () => {
       error: null,
       isPlaceholderData: true,
     })
-    // Hook state update
-    expect(states[3]).toMatchObject({
-      data: 0,
-      isFetching: true,
-      status: 'success',
-      error: null,
-      isPlaceholderData: true,
-    })
     // New data
-    expect(states[4]).toMatchObject({
+    expect(states[3]).toMatchObject({
       data: 1,
       isFetching: false,
       status: 'success',
@@ -1758,15 +1748,7 @@ describe('useQuery', () => {
       isPlaceholderData: false,
     })
     // rerender Page 2
-    expect(states[5]).toMatchObject({
-      data: 1,
-      isFetching: true,
-      status: 'success',
-      error: null,
-      isPlaceholderData: true,
-    })
-    // Hook state update again
-    expect(states[6]).toMatchObject({
+    expect(states[4]).toMatchObject({
       data: 1,
       isFetching: true,
       status: 'success',
@@ -1774,13 +1756,13 @@ describe('useQuery', () => {
       isPlaceholderData: true,
     })
     // Error
-    expect(states[7]).toMatchObject({
+    expect(states[5]).toMatchObject({
       data: undefined,
       isFetching: false,
       status: 'error',
       isPlaceholderData: false,
     })
-    expect(states[7]?.error).toHaveProperty('message', 'Error test')
+    expect(states[5]!.error).toHaveProperty('message', 'Error test')
   })
 
   it('should not show initial data from next query if placeholderData is set', async () => {
@@ -1825,7 +1807,7 @@ describe('useQuery', () => {
       rendered.getByText('data: 1, count: 1, isFetching: false'),
     )
 
-    expect(states.length).toBe(5)
+    expect(states.length).toBe(4)
 
     // Initial
     expect(states[0]).toMatchObject({
@@ -1848,15 +1830,8 @@ describe('useQuery', () => {
       isSuccess: true,
       isPlaceholderData: false,
     })
-    // Hook state update
-    expect(states[3]).toMatchObject({
-      data: 99,
-      isFetching: true,
-      isSuccess: true,
-      isPlaceholderData: false,
-    })
     // New data
-    expect(states[4]).toMatchObject({
+    expect(states[3]).toMatchObject({
       data: 1,
       isFetching: false,
       isSuccess: true,
@@ -3663,6 +3638,7 @@ describe('useQuery', () => {
           })
           act(() => setPrefetched(true))
         }
+
         prefetch()
       }, [])
 
@@ -5929,6 +5905,7 @@ describe('useQuery', () => {
         </div>
       )
     }
+
     const rendered = renderWithClient(queryClient, <Page />)
     const fetchBtn = rendered.getByRole('button', { name: 'refetch' })
     await waitFor(() => rendered.getByText('data: 1'))
@@ -5989,8 +5966,132 @@ describe('useQuery', () => {
         </div>
       )
     }
+
     const rendered = renderWithClient(queryClient, <Page />)
     await waitFor(() => rendered.getByText('status: success'))
     await waitFor(() => rendered.getByText('data: 1'))
   })
+  it('should reuse same data object reference when queryKey changes back to some cached data', async () => {
+    const key = queryKey()
+    const spy = vi.fn()
+
+    async function fetchNumber(id: number) {
+      await sleep(5)
+      return { numbers: { current: { id } } }
+    }
+    function Test() {
+      const [id, setId] = React.useState(1)
+
+      const { data } = useQuery({
+        select: selector,
+        queryKey: [key, 'user', id],
+        queryFn: () => fetchNumber(id),
+      })
+
+      React.useEffect(() => {
+        spy(data)
+      }, [data])
+
+      return (
+        <div>
+          <button name="1" onClick={() => setId(1)}>
+            1
+          </button>
+          <button name="2" onClick={() => setId(2)}>
+            2
+          </button>
+          <span>Rendered Id: {data?.id}</span>
+        </div>
+      )
+    }
+
+    function selector(data: any) {
+      return data.numbers.current
+    }
+
+    const rendered = renderWithClient(queryClient, <Test />)
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    spy.mockClear()
+    await waitFor(() => rendered.getByText('Rendered Id: 1'))
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    spy.mockClear()
+    fireEvent.click(rendered.getByRole('button', { name: /2/ }))
+    await waitFor(() => rendered.getByText('Rendered Id: 2'))
+    expect(spy).toHaveBeenCalledTimes(2) // called with undefined because id changed
+
+    spy.mockClear()
+    fireEvent.click(rendered.getByRole('button', { name: /1/ }))
+    await waitFor(() => rendered.getByText('Rendered Id: 1'))
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    spy.mockClear()
+    fireEvent.click(rendered.getByRole('button', { name: /2/ }))
+    await waitFor(() => rendered.getByText('Rendered Id: 2'))
+    expect(spy).toHaveBeenCalledTimes(1)
+  })
+  it('should reuse same data object reference when queryKey changes and placeholderData is present', async () => {
+    const key = queryKey()
+    const spy = vi.fn()
+
+    async function fetchNumber(id: number) {
+      await sleep(5)
+      return { numbers: { current: { id } } }
+    }
+    function Test() {
+      const [id, setId] = React.useState(1)
+
+      const { data } = useQuery({
+        select: selector,
+        queryKey: [key, 'user', id],
+        queryFn: () => fetchNumber(id),
+        placeholderData: { numbers: { current: { id: 99 } } },
+      })
+
+      React.useEffect(() => {
+        spy(data)
+      }, [data])
+
+      return (
+        <div>
+          <button name="1" onClick={() => setId(1)}>
+            1
+          </button>
+          <button name="2" onClick={() => setId(2)}>
+            2
+          </button>
+          <span>Rendered Id: {data?.id}</span>
+        </div>
+      )
+    }
+
+    function selector(data: any) {
+      return data.numbers.current
+    }
+
+    const rendered = renderWithClient(queryClient, <Test />)
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    spy.mockClear()
+    await waitFor(() => rendered.getByText('Rendered Id: 99'))
+    await waitFor(() => rendered.getByText('Rendered Id: 1'))
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    spy.mockClear()
+    fireEvent.click(rendered.getByRole('button', { name: /2/ }))
+    await waitFor(() => rendered.getByText('Rendered Id: 99'))
+    await waitFor(() => rendered.getByText('Rendered Id: 2'))
+    expect(spy).toHaveBeenCalledTimes(2) // called with undefined because id changed
+
+    spy.mockClear()
+    fireEvent.click(rendered.getByRole('button', { name: /1/ }))
+    await waitFor(() => rendered.getByText('Rendered Id: 1'))
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    spy.mockClear()
+    fireEvent.click(rendered.getByRole('button', { name: /2/ }))
+    await waitFor(() => rendered.getByText('Rendered Id: 2'))
+    expect(spy).toHaveBeenCalledTimes(1)
+  })
 })

package/src/__tests__/useQuery.types.test.tsx

@@ -1,7 +1,7 @@
 import { useQuery } from '../useQuery'
 import { queryOptions } from '../queryOptions'
-import type { Expect, Equal } from './utils'
 import { doNotExecute } from './utils'
+import type { Equal, Expect } from './utils'
 
 describe('initialData', () => {
   describe('Config object overload', () => {

package/src/__tests__/utils.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react'
 import { act, render } from '@testing-library/react'
-import type { QueryClientConfig } from '..'
-import { QueryClient, QueryClientProvider } from '..'
 import * as utils from '@tanstack/query-core'
 import { vi } from 'vitest'
+import { QueryClient, QueryClientProvider } from '..'
+import type { 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 {
   ThrowOnError,
 } from '@tanstack/query-core'
 import type { QueryErrorResetBoundaryValue } from './QueryErrorResetBoundary'
-import * as React from 'react'
-import { shouldThrowError } from './utils'
 
 export const ensurePreventErrorBoundaryRetry = <
   TQueryFnData,

package/src/suspense.ts

@@ -1,8 +1,8 @@
 import type {
   DefaultedQueryObserverOptions,
-  QueryObserverResult,
   QueryKey,
   QueryObserver,
+  QueryObserverResult,
 } from '@tanstack/query-core'
 import type { QueryErrorResetBoundaryValue } from './QueryErrorResetBoundary'
 

package/src/types.ts

@@ -1,17 +1,17 @@
 /* istanbul ignore file */
 
 import type {
+  DefaultError,
+  DefinedQueryObserverResult,
   InfiniteQueryObserverOptions,
   InfiniteQueryObserverResult,
+  MutateFunction,
+  MutationObserverOptions,
   MutationObserverResult,
+  QueryKey,
   QueryObserverOptions,
   QueryObserverResult,
-  QueryKey,
-  MutationObserverOptions,
-  MutateFunction,
-  DefinedQueryObserverResult,
   WithRequired,
-  DefaultError,
 } from '@tanstack/query-core'
 
 export interface UseBaseQueryOptions<

package/src/useBaseQuery.ts

@@ -1,18 +1,18 @@
 'use client'
 import * as React from 'react'
 
-import type { QueryClient, QueryKey, QueryObserver } from '@tanstack/query-core'
 import { notifyManager } from '@tanstack/query-core'
 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 { UseBaseQueryOptions } from './types'
+import type { QueryClient, QueryKey, QueryObserver } from '@tanstack/query-core'
 
 export function useBaseQuery<
   TQueryFnData,

package/src/useInfiniteQuery.ts

@@ -1,14 +1,14 @@
 'use client'
+import { InfiniteQueryObserver } from '@tanstack/query-core'
+import { useBaseQuery } from './useBaseQuery'
 import type {
-  QueryObserver,
-  QueryKey,
-  QueryClient,
   DefaultError,
   InfiniteData,
+  QueryClient,
+  QueryKey,
+  QueryObserver,
 } from '@tanstack/query-core'
-import { InfiniteQueryObserver } from '@tanstack/query-core'
 import type { UseInfiniteQueryOptions, UseInfiniteQueryResult } from './types'
-import { useBaseQuery } from './useBaseQuery'
 
 // HOOK
 export function useInfiniteQuery<

package/src/useIsFetching.ts

@@ -1,9 +1,9 @@
 'use client'
 import * as React from 'react'
-import type { QueryClient, QueryFilters } from '@tanstack/query-core'
 import { notifyManager } from '@tanstack/query-core'
 
 import { useQueryClient } from './QueryClientProvider'
+import type { QueryClient, QueryFilters } from '@tanstack/query-core'
 
 export function useIsFetching(
   filters?: QueryFilters,

package/src/useMutation.ts

@@ -1,14 +1,14 @@
 'use client'
 import * as React from 'react'
-import type { QueryClient, DefaultError } from '@tanstack/query-core'
-import { notifyManager, MutationObserver } from '@tanstack/query-core'
+import { MutationObserver, notifyManager } from '@tanstack/query-core'
 import { useQueryClient } from './QueryClientProvider'
+import { shouldThrowError } from './utils'
 import type {
   UseMutateFunction,
   UseMutationOptions,
   UseMutationResult,
 } from './types'
-import { shouldThrowError } from './utils'
+import type { DefaultError, QueryClient } from '@tanstack/query-core'
 
 // HOOK
 

package/src/useMutationState.ts

@@ -1,16 +1,16 @@
 'use client'
 import * as React from 'react'
 
+import { notifyManager, replaceEqualDeep } from '@tanstack/query-core'
+import { useQueryClient } from './QueryClientProvider'
 import type {
-  MutationFilters,
-  QueryClient,
+  DefaultError,
   Mutation,
   MutationCache,
-  DefaultError,
+  MutationFilters,
   MutationState,
+  QueryClient,
 } from '@tanstack/query-core'
-import { notifyManager, replaceEqualDeep } from '@tanstack/query-core'
-import { useQueryClient } from './QueryClientProvider'
 
 export function useIsMutating(
   filters?: MutationFilters,