@tanstack/react-query 5.24.8 → 5.26.3

package/src/__tests__/infiniteQueryOptions.test-d.tsx

@@ -1,9 +1,9 @@
 import { describe, expectTypeOf, it } from 'vitest'
 import { QueryClient } from '@tanstack/query-core'
+import { type InfiniteData, dataTagSymbol } from '@tanstack/query-core'
 import { infiniteQueryOptions } from '../infiniteQueryOptions'
 import { useInfiniteQuery } from '../useInfiniteQuery'
 import { useSuspenseInfiniteQuery } from '../useSuspenseInfiniteQuery'
-import type { InfiniteData, dataTagSymbol } from '@tanstack/query-core'
 
 describe('queryOptions', () => {
   it('should not allow excess properties', () => {
@@ -75,9 +75,7 @@ describe('queryOptions', () => {
       initialPageParam: 1,
     })
 
-    expectTypeOf<(typeof queryKey)[typeof dataTagSymbol]>().toEqualTypeOf<
-      InfiniteData<string>
-    >()
+    expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf<InfiniteData<string>>()
   })
   it('should tag the queryKey even if no promise is returned', () => {
     const { queryKey } = infiniteQueryOptions({
@@ -87,9 +85,7 @@ describe('queryOptions', () => {
       initialPageParam: 1,
     })
 
-    expectTypeOf<(typeof queryKey)[typeof dataTagSymbol]>().toEqualTypeOf<
-      InfiniteData<string>
-    >()
+    expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf<InfiniteData<string>>()
   })
   it('should tag the queryKey with the result type of the QueryFn if select is used', () => {
     const { queryKey } = infiniteQueryOptions({
@@ -100,9 +96,7 @@ describe('queryOptions', () => {
       initialPageParam: 1,
     })
 
-    expectTypeOf<(typeof queryKey)[typeof dataTagSymbol]>().toEqualTypeOf<
-      InfiniteData<string>
-    >()
+    expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf<InfiniteData<string>>()
   })
   it('should return the proper type when passed to getQueryData', () => {
     const { queryKey } = infiniteQueryOptions({

package/src/__tests__/queryOptions.test-d.tsx

@@ -1,6 +1,5 @@
 import { describe, expect, expectTypeOf, it } from 'vitest'
-import { QueryClient } from '@tanstack/query-core'
-import { dataTagSymbol } from '@tanstack/query-core'
+import { QueryClient, dataTagSymbol, skipToken } from '@tanstack/query-core'
 import { queryOptions } from '../queryOptions'
 import { useQuery } from '../useQuery'
 import { useQueries } from '../useQueries'
@@ -43,6 +42,7 @@ describe('queryOptions', () => {
     const { data } = useSuspenseQuery(options)
     expectTypeOf(data).toEqualTypeOf<number>()
   })
+
   it('should work when passed to fetchQuery', async () => {
     const options = queryOptions({
       queryKey: ['key'],
@@ -147,4 +147,26 @@ describe('queryOptions', () => {
     const data = queryClient.setQueryData(queryKey, 5)
     expectTypeOf(data).toEqualTypeOf<number | undefined>()
   })
+
+  it('should infer even if there is a conditional skipToken', () => {
+    const options = queryOptions({
+      queryKey: ['key'],
+      queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5),
+    })
+
+    const queryClient = new QueryClient()
+    const data = queryClient.getQueryData(options.queryKey)
+    expectTypeOf(data).toEqualTypeOf<number | undefined>()
+  })
+
+  it('should infer to unknown if we disable a query with just a skipToken', () => {
+    const options = queryOptions({
+      queryKey: ['key'],
+      queryFn: skipToken,
+    })
+
+    const queryClient = new QueryClient()
+    const data = queryClient.getQueryData(options.queryKey)
+    expectTypeOf(data).toEqualTypeOf<unknown>()
+  })
 })

package/src/__tests__/suspense.test-d.tsx

@@ -1,6 +1,7 @@
 import { describe, expectTypeOf, it } from 'vitest'
 import { useSuspenseQuery } from '../useSuspenseQuery'
 import { useSuspenseInfiniteQuery } from '../useSuspenseInfiniteQuery'
+import type { UseSuspenseQueryOptions } from '..'
 import type { InfiniteData } from '@tanstack/query-core'
 
 describe('useSuspenseQuery', () => {
@@ -121,4 +122,14 @@ describe('useSuspenseInfiniteQuery', () => {
     // @ts-expect-error TS2339
     query.isPlaceholderData
   })
+
+  it('should not accept skipToken type for queryFn in useSuspenseQuery', () => {
+    const query: UseSuspenseQueryOptions = {
+      // @ts-expect-error
+      queryFn: skipToken,
+      queryKey: [1],
+    }
+
+    return query
+  })
 })

package/src/__tests__/useInfiniteQuery.test.tsx

@@ -885,7 +885,8 @@ describe('useInfiniteQuery', () => {
 
   it('should be able to set new pages with the query client', async () => {
     const key = queryKey()
-    const states: Array<UseInfiniteQueryResult<InfiniteData<number>>> = []
+
+    let multiplier = 1
 
     function Page() {
       const [firstPage, setFirstPage] = React.useState(0)
@@ -894,75 +895,50 @@ describe('useInfiniteQuery', () => {
         queryKey: key,
         queryFn: async ({ pageParam }) => {
           await sleep(10)
-          return Number(pageParam)
+          return Number(multiplier * pageParam)
         },
         getNextPageParam: (lastPage) => lastPage + 1,
         initialPageParam: firstPage,
-        notifyOnChangeProps: 'all',
       })
 
-      states.push(state)
+      return (
+        <div>
+          <button
+            onClick={() => {
+              queryClient.setQueryData(key, {
+                pages: [7, 8],
+                pageParams: [7, 8],
+              })
+              setFirstPage(7)
+            }}
+          >
+            setPages
+          </button>
+          <button onClick={() => state.refetch()}>refetch</button>
+          <div>data: {JSON.stringify(state.data)}</div>
+        </div>
+      )
+    }
 
-      const { refetch } = state
+    const rendered = renderWithClient(queryClient, <Page />)
 
-      React.useEffect(() => {
-        setActTimeout(() => {
-          queryClient.setQueryData(key, { pages: [7, 8], pageParams: [7, 8] })
-          setFirstPage(7)
-        }, 20)
+    await waitFor(() =>
+      rendered.getByText('data: {"pages":[0],"pageParams":[0]}'),
+    )
 
-        setActTimeout(() => {
-          refetch()
-        }, 50)
-      }, [refetch])
+    fireEvent.click(rendered.getByRole('button', { name: /setPages/i }))
 
-      return null
-    }
+    await waitFor(() =>
+      rendered.getByText('data: {"pages":[7,8],"pageParams":[7,8]}'),
+    )
 
-    renderWithClient(queryClient, <Page />)
+    multiplier = 2
 
-    await sleep(100)
+    fireEvent.click(rendered.getByRole('button', { name: /refetch/i }))
 
-    expect(states.length).toBe(5)
-    expect(states[0]).toMatchObject({
-      hasNextPage: false,
-      data: undefined,
-      isFetching: true,
-      isFetchingNextPage: false,
-      isSuccess: false,
-    })
-    // After first fetch
-    expect(states[1]).toMatchObject({
-      hasNextPage: true,
-      data: { pages: [0] },
-      isFetching: false,
-      isFetchingNextPage: false,
-      isSuccess: true,
-    })
-    // Set state
-    expect(states[2]).toMatchObject({
-      hasNextPage: true,
-      data: { pages: [7, 8] },
-      isFetching: false,
-      isFetchingNextPage: false,
-      isSuccess: true,
-    })
-    // Refetch
-    expect(states[3]).toMatchObject({
-      hasNextPage: true,
-      data: { pages: [7, 8] },
-      isFetching: true,
-      isFetchingNextPage: false,
-      isSuccess: true,
-    })
-    // Refetch done
-    expect(states[4]).toMatchObject({
-      hasNextPage: true,
-      data: { pages: [7, 8] },
-      isFetching: false,
-      isFetchingNextPage: false,
-      isSuccess: true,
-    })
+    await waitFor(() =>
+      rendered.getByText('data: {"pages":[14,30],"pageParams":[7,15]}'),
+    )
   })
 
   it('should only refetch the first page when initialData is provided', async () => {

package/src/__tests__/useMutation.test.tsx

@@ -453,8 +453,6 @@ describe('useMutation', () => {
 
     const rendered = renderWithClient(queryClient, <Page />)
 
-    window.dispatchEvent(new Event('offline'))
-
     await waitFor(() => {
       expect(
         rendered.getByText('error: null, status: idle, isPaused: false'),
@@ -471,8 +469,8 @@ describe('useMutation', () => {
 
     expect(count).toBe(0)
 
-    onlineMock.mockRestore()
-    window.dispatchEvent(new Event('online'))
+    onlineMock.mockReturnValue(true)
+    queryClient.getMutationCache().resumePausedMutations()
 
     await sleep(100)
 
@@ -483,6 +481,7 @@ describe('useMutation', () => {
     })
 
     expect(count).toBe(2)
+    onlineMock.mockRestore()
   })
 
   it('should call onMutate even if paused', async () => {
@@ -515,8 +514,6 @@ describe('useMutation', () => {
 
     await rendered.findByText('data: null, status: idle, isPaused: false')
 
-    window.dispatchEvent(new Event('offline'))
-
     fireEvent.click(rendered.getByRole('button', { name: /mutate/i }))
 
     await rendered.findByText('data: null, status: pending, isPaused: true')
@@ -524,13 +521,15 @@ describe('useMutation', () => {
     expect(onMutate).toHaveBeenCalledTimes(1)
     expect(onMutate).toHaveBeenCalledWith('todo')
 
-    onlineMock.mockRestore()
-    window.dispatchEvent(new Event('online'))
+    onlineMock.mockReturnValue(true)
+    queryClient.getMutationCache().resumePausedMutations()
 
     await rendered.findByText('data: 1, status: success, isPaused: false')
 
     expect(onMutate).toHaveBeenCalledTimes(1)
     expect(count).toBe(1)
+
+    onlineMock.mockRestore()
   })
 
   it('should optimistically go to paused state if offline', async () => {
@@ -564,8 +563,6 @@ describe('useMutation', () => {
 
     await rendered.findByText('data: null, status: idle, isPaused: false')
 
-    window.dispatchEvent(new Event('offline'))
-
     fireEvent.click(rendered.getByRole('button', { name: /mutate/i }))
 
     await rendered.findByText('data: null, status: pending, isPaused: true')
@@ -574,22 +571,25 @@ describe('useMutation', () => {
     expect(states[0]).toBe('idle, false')
     expect(states[1]).toBe('pending, true')
 
-    onlineMock.mockRestore()
-    window.dispatchEvent(new Event('online'))
+    onlineMock.mockReturnValue(true)
+    queryClient.getMutationCache().resumePausedMutations()
 
     await rendered.findByText('data: 1, status: success, isPaused: false')
+
+    onlineMock.mockRestore()
   })
 
   it('should be able to retry a mutation when online', async () => {
     const onlineMock = mockOnlineManagerIsOnline(false)
+    const key = queryKey()
 
     let count = 0
-    const states: Array<UseMutationResult<any, any, any, any>> = []
 
     function Page() {
       const state = useMutation({
+        mutationKey: key,
         mutationFn: async (_text: string) => {
-          await sleep(1)
+          await sleep(10)
           count++
           return count > 1
             ? Promise.resolve('data')
@@ -600,69 +600,50 @@ describe('useMutation', () => {
         networkMode: 'offlineFirst',
       })
 
-      states.push(state)
-
-      const { mutate } = state
-
-      React.useEffect(() => {
-        setActTimeout(() => {
-          window.dispatchEvent(new Event('offline'))
-          mutate('todo')
-        }, 10)
-      }, [mutate])
-
-      return null
+      return (
+        <div>
+          <button onClick={() => state.mutate('todo')}>mutate</button>
+          <div>status: {state.status}</div>
+          <div>isPaused: {String(state.isPaused)}</div>
+          <div>data: {state.data ?? 'null'}</div>
+        </div>
+      )
     }
 
-    renderWithClient(queryClient, <Page />)
-
-    await sleep(50)
+    const rendered = renderWithClient(queryClient, <Page />)
 
-    expect(states.length).toBe(4)
-    expect(states[0]).toMatchObject({
-      isPending: false,
-      isPaused: false,
-      failureCount: 0,
-      failureReason: null,
-    })
-    expect(states[1]).toMatchObject({
-      isPending: true,
-      isPaused: false,
-      failureCount: 0,
-      failureReason: null,
-    })
-    expect(states[2]).toMatchObject({
-      isPending: true,
-      isPaused: false,
-      failureCount: 1,
-      failureReason: new Error('oops'),
-    })
-    expect(states[3]).toMatchObject({
-      isPending: true,
+    await waitFor(() => rendered.getByText('status: idle'))
+    fireEvent.click(rendered.getByRole('button', { name: /mutate/i }))
+    await waitFor(() => rendered.getByText('isPaused: true'))
+
+    expect(
+      queryClient.getMutationCache().findAll({ mutationKey: key }).length,
+    ).toBe(1)
+    expect(
+      queryClient.getMutationCache().findAll({ mutationKey: key })[0]?.state,
+    ).toMatchObject({
+      status: 'pending',
       isPaused: true,
       failureCount: 1,
       failureReason: new Error('oops'),
     })
 
-    onlineMock.mockRestore()
-    window.dispatchEvent(new Event('online'))
+    onlineMock.mockReturnValue(true)
+    queryClient.getMutationCache().resumePausedMutations()
 
-    await sleep(50)
+    await waitFor(() => rendered.getByText('data: data'))
 
-    expect(states.length).toBe(6)
-    expect(states[4]).toMatchObject({
-      isPending: true,
-      isPaused: false,
-      failureCount: 1,
-      failureReason: new Error('oops'),
-    })
-    expect(states[5]).toMatchObject({
-      isPending: false,
+    expect(
+      queryClient.getMutationCache().findAll({ mutationKey: key })[0]?.state,
+    ).toMatchObject({
+      status: 'success',
       isPaused: false,
       failureCount: 0,
       failureReason: null,
       data: 'data',
     })
+
+    onlineMock.mockRestore()
   })
 
   it('should not change state if unmounted', async () => {