@tanstack/react-query 5.0.0-alpha.70 → 5.0.0-alpha.81

package/src/__tests__/useInfiniteQuery.test.tsx

@@ -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__/useQuery.test.tsx

@@ -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/useBaseQuery.ts

@@ -1,4 +1,4 @@
-import 'client-only'
+'use client'
 import * as React from 'react'
 
 import type { QueryClient, QueryKey, QueryObserver } from '@tanstack/query-core'

package/src/useInfiniteQuery.ts

@@ -1,4 +1,4 @@
-import 'client-only'
+'use client'
 import type {
   QueryObserver,
   QueryKey,

package/src/useIsFetching.ts

@@ -1,4 +1,4 @@
-import 'client-only'
+'use client'
 import * as React from 'react'
 import type { QueryClient, QueryFilters } from '@tanstack/query-core'
 import { notifyManager } from '@tanstack/query-core'

package/src/useMutation.ts

@@ -1,4 +1,4 @@
-import 'client-only'
+'use client'
 import * as React from 'react'
 import type { QueryClient, DefaultError } from '@tanstack/query-core'
 import { notifyManager, MutationObserver } from '@tanstack/query-core'

package/src/useMutationState.ts

@@ -1,4 +1,4 @@
-import 'client-only'
+'use client'
 import * as React from 'react'
 
 import type {

package/src/useQueries.ts

@@ -1,4 +1,4 @@
-import 'client-only'
+'use client'
 import * as React from 'react'
 
 import type {

package/src/useQuery.ts

@@ -1,4 +1,4 @@
-import 'client-only'
+'use client'
 import type { QueryClient, QueryKey, DefaultError } from '@tanstack/query-core'
 import { QueryObserver } from '@tanstack/query-core'
 import type {