@tanstack/react-query 5.0.0-alpha.9 → 5.0.0-alpha.90

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

@@ -1,17 +1,17 @@
 import * as React from 'react'
 import ReactDOM from 'react-dom'
-import ReactDOMTestUtils from 'react-dom/test-utils'
-import ReactDOMServer from 'react-dom/server'
+import * as ReactDOMTestUtils from 'react-dom/test-utils'
+import * as ReactDOMServer from 'react-dom/server'
 // eslint-disable-next-line import/no-unresolved -- types only for module augmentation
 import type {} from 'react-dom/next'
 import { vi } from 'vitest'
 
 import {
-  useQuery,
-  QueryClientProvider,
   QueryCache,
+  QueryClientProvider,
   dehydrate,
   hydrate,
+  useQuery,
 } from '..'
 import { createQueryClient, setIsServer, sleep } from './utils'
 

package/src/__tests__/ssr.test.tsx

@@ -2,9 +2,9 @@ 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 { vi } from 'vitest'
+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,7 @@
 import { fireEvent, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
-import type { InfiniteData, UseInfiniteQueryResult, UseQueryResult } from '..'
+import { vi } from 'vitest'
 import {
   QueryCache,
   QueryErrorResetBoundary,
@@ -11,7 +11,7 @@ import {
   useQueryErrorResetBoundary,
 } from '..'
 import { createQueryClient, queryKey, renderWithClient, sleep } from './utils'
-import { vi } from 'vitest'
+import type { InfiniteData, UseInfiniteQueryResult, UseQueryResult } from '..'
 
 describe("useQuery's in Suspense mode", () => {
   const queryCache = new QueryCache()
@@ -190,88 +190,6 @@ describe("useQuery's in Suspense mode", () => {
     expect(queryCache.find({ queryKey: key })?.getObserversCount()).toBe(0)
   })
 
-  it('should call onSuccess on the first successful call', async () => {
-    const key = queryKey()
-
-    const successFn = vi.fn()
-
-    function Page() {
-      useQuery({
-        queryKey: [key],
-        queryFn: async () => {
-          await sleep(10)
-          return key
-        },
-        suspense: true,
-        select: () => 'selected',
-        onSuccess: successFn,
-      })
-
-      return <>rendered</>
-    }
-
-    const rendered = renderWithClient(
-      queryClient,
-      <React.Suspense fallback="loading">
-        <Page />
-      </React.Suspense>,
-    )
-
-    await waitFor(() => rendered.getByText('rendered'))
-
-    await waitFor(() => expect(successFn).toHaveBeenCalledTimes(1))
-    await waitFor(() => expect(successFn).toHaveBeenCalledWith('selected'))
-  })
-
-  it('should call every onSuccess handler within a suspense boundary', async () => {
-    const key = queryKey()
-
-    const successFn1 = vi.fn()
-    const successFn2 = vi.fn()
-
-    function FirstComponent() {
-      useQuery({
-        queryKey: key,
-        queryFn: () => {
-          sleep(10)
-          return 'data'
-        },
-        suspense: true,
-        onSuccess: successFn1,
-      })
-
-      return <span>first</span>
-    }
-
-    function SecondComponent() {
-      useQuery({
-        queryKey: key,
-        queryFn: () => {
-          sleep(10)
-          return 'data'
-        },
-
-        suspense: true,
-        onSuccess: successFn2,
-      })
-
-      return <span>second</span>
-    }
-
-    const rendered = renderWithClient(
-      queryClient,
-      <React.Suspense fallback="loading">
-        <FirstComponent />
-        <SecondComponent />
-      </React.Suspense>,
-    )
-
-    await waitFor(() => rendered.getByText('second'))
-
-    await waitFor(() => expect(successFn1).toHaveBeenCalledTimes(1))
-    await waitFor(() => expect(successFn2).toHaveBeenCalledTimes(1))
-  })
-
   // https://github.com/tannerlinsley/react-query/issues/468
   it('should reset error state if new component instances are mounted', async () => {
     const consoleMock = vi
@@ -616,7 +534,7 @@ describe("useQuery's in Suspense mode", () => {
     consoleMock.mockRestore()
   })
 
-  it('should not throw errors to the error boundary when throwErrors: false', async () => {
+  it('should not throw errors to the error boundary when throwOnError: false', async () => {
     const key = queryKey()
 
     function Page() {
@@ -628,7 +546,7 @@ describe("useQuery's in Suspense mode", () => {
         },
         retry: false,
         suspense: true,
-        throwErrors: false,
+        throwOnError: false,
       })
       return <div>rendered</div>
     }
@@ -655,7 +573,7 @@ describe("useQuery's in Suspense mode", () => {
     await waitFor(() => rendered.getByText('rendered'))
   })
 
-  it('should throw errors to the error boundary when a throwErrors function returns true', async () => {
+  it('should throw errors to the error boundary when a throwOnError function returns true', async () => {
     const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
@@ -670,7 +588,7 @@ describe("useQuery's in Suspense mode", () => {
         },
         retry: false,
         suspense: true,
-        throwErrors: (err) => err.message !== 'Local Error',
+        throwOnError: (err) => err.message !== 'Local Error',
       })
       return <div>rendered</div>
     }
@@ -698,7 +616,7 @@ describe("useQuery's in Suspense mode", () => {
     consoleMock.mockRestore()
   })
 
-  it('should not throw errors to the error boundary when a throwErrors function returns false', async () => {
+  it('should not throw errors to the error boundary when a throwOnError function returns false', async () => {
     const key = queryKey()
 
     function Page() {
@@ -710,7 +628,7 @@ describe("useQuery's in Suspense mode", () => {
         },
         retry: false,
         suspense: true,
-        throwErrors: (err) => err.message !== 'Local Error',
+        throwOnError: (err) => err.message !== 'Local Error',
       })
       return <div>rendered</div>
     }

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', () => {
@@ -128,33 +128,6 @@ describe('select', () => {
       return result
     })
   })
-  it('should pass transformed data to onSuccess', () => {
-    doNotExecute(() => {
-      const infiniteQuery = useInfiniteQuery({
-        queryKey: ['key'],
-        queryFn: ({ pageParam }) => {
-          return pageParam * 5
-        },
-        defaultPageParam: 1,
-        getNextPageParam: () => undefined,
-        select: (data) => {
-          return {
-            ...data,
-            pages: data.pages.map((page) => page.toString()),
-          }
-        },
-        onSuccess: (data) => {
-          const result: Expect<Equal<InfiniteData<string>, typeof data>> = true
-          doNotExecute(() => result)
-        },
-      })
-
-      const result: Expect<
-        Equal<InfiniteData<string> | undefined, (typeof infiniteQuery)['data']>
-      > = true
-      return result
-    })
-  })
 })
 describe('getNextPageParam / getPreviousPageParam', () => {
   it('should get typed params', () => {

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,17 +3,17 @@ 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,
+  mockOnlineManagerIsOnline,
   queryKey,
   renderWithClient,
   setActTimeout,
   sleep,
 } from './utils'
-import { vi } from 'vitest'
+import type { UseMutationResult } from '../types'
 
 describe('useMutation', () => {
   const queryCache = new QueryCache()
@@ -427,7 +427,7 @@ describe('useMutation', () => {
   })
 
   it('should not retry mutations while offline', async () => {
-    const onlineMock = mockNavigatorOnLine(false)
+    const onlineMock = mockOnlineManagerIsOnline(false)
 
     let count = 0
 
@@ -455,6 +455,8 @@ describe('useMutation', () => {
 
     const rendered = renderWithClient(queryClient, <Page />)
 
+    window.dispatchEvent(new Event('offline'))
+
     await waitFor(() => {
       expect(
         rendered.getByText('error: null, status: idle, isPaused: false'),
@@ -471,7 +473,7 @@ describe('useMutation', () => {
 
     expect(count).toBe(0)
 
-    onlineMock.mockReturnValue(true)
+    onlineMock.mockRestore()
     window.dispatchEvent(new Event('online'))
 
     await sleep(100)
@@ -483,12 +485,10 @@ describe('useMutation', () => {
     })
 
     expect(count).toBe(2)
-
-    onlineMock.mockRestore()
   })
 
   it('should call onMutate even if paused', async () => {
-    const onlineMock = mockNavigatorOnLine(false)
+    const onlineMock = mockOnlineManagerIsOnline(false)
     const onMutate = vi.fn()
     let count = 0
 
@@ -517,6 +517,8 @@ 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,19 +526,17 @@ describe('useMutation', () => {
     expect(onMutate).toHaveBeenCalledTimes(1)
     expect(onMutate).toHaveBeenCalledWith('todo')
 
-    onlineMock.mockReturnValue(true)
+    onlineMock.mockRestore()
     window.dispatchEvent(new Event('online'))
 
     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 () => {
-    const onlineMock = mockNavigatorOnLine(false)
+    const onlineMock = mockOnlineManagerIsOnline(false)
     let count = 0
     const states: Array<string> = []
 
@@ -566,6 +566,8 @@ 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,16 +576,14 @@ describe('useMutation', () => {
     expect(states[0]).toBe('idle, false')
     expect(states[1]).toBe('pending, true')
 
-    onlineMock.mockReturnValue(true)
+    onlineMock.mockRestore()
     window.dispatchEvent(new Event('online'))
 
     await rendered.findByText('data: 1, status: success, isPaused: false')
-
-    onlineMock.mockRestore()
   })
 
   it('should be able to retry a mutation when online', async () => {
-    const onlineMock = mockNavigatorOnLine(false)
+    const onlineMock = mockOnlineManagerIsOnline(false)
 
     let count = 0
     const states: UseMutationResult<any, any, any, any>[] = []
@@ -608,6 +608,7 @@ describe('useMutation', () => {
 
       React.useEffect(() => {
         setActTimeout(() => {
+          window.dispatchEvent(new Event('offline'))
           mutate('todo')
         }, 10)
       }, [mutate])
@@ -645,7 +646,7 @@ describe('useMutation', () => {
       failureReason: new Error('oops'),
     })
 
-    onlineMock.mockReturnValue(true)
+    onlineMock.mockRestore()
     window.dispatchEvent(new Event('online'))
 
     await sleep(50)
@@ -664,8 +665,6 @@ describe('useMutation', () => {
       failureReason: null,
       data: 'data',
     })
-
-    onlineMock.mockRestore()
   })
 
   it('should not change state if unmounted', async () => {
@@ -688,7 +687,7 @@ describe('useMutation', () => {
     fireEvent.click(getByText('unmount'))
   })
 
-  it('should be able to throw an error when throwErrors is set to true', async () => {
+  it('should be able to throw an error when throwOnError is set to true', async () => {
     const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
@@ -699,7 +698,7 @@ describe('useMutation', () => {
           err.stack = ''
           return Promise.reject(err)
         },
-        throwErrors: true,
+        throwOnError: true,
       })
 
       return (
@@ -735,7 +734,7 @@ describe('useMutation', () => {
     consoleMock.mockRestore()
   })
 
-  it('should be able to throw an error when throwErrors is a function that returns true', async () => {
+  it('should be able to throw an error when throwOnError is a function that returns true', async () => {
     const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
@@ -747,7 +746,7 @@ describe('useMutation', () => {
           err.stack = ''
           return Promise.reject(err)
         },
-        throwErrors: () => {
+        throwOnError: () => {
           boundary = !boundary
           return !boundary
         },

package/src/__tests__/useMutationState.test.tsx

@@ -4,10 +4,12 @@ import { useIsMutating, useMutationState } from '../useMutationState'
 import { useMutation } from '../useMutation'
 import {
   createQueryClient,
+  doNotExecute,
   renderWithClient,
   setActTimeout,
   sleep,
 } from './utils'
+import type { MutationState, MutationStatus } from '@tanstack/query-core'
 
 describe('useIsMutating', () => {
   it('should return the number of fetching mutations', async () => {
@@ -172,6 +174,27 @@ describe('useIsMutating', () => {
 })
 
 describe('useMutationState', () => {
+  describe('types', () => {
+    it('should default to QueryState', () => {
+      doNotExecute(() => {
+        const result = useMutationState({
+          filters: { status: 'pending' },
+        })
+
+        expectTypeOf(result).toEqualTypeOf<Array<MutationState>>()
+      })
+    })
+    it('should infer with select', () => {
+      doNotExecute(() => {
+        const result = useMutationState({
+          filters: { status: 'pending' },
+          select: (mutation) => mutation.state.status,
+        })
+
+        expectTypeOf(result).toEqualTypeOf<Array<MutationStatus>>()
+      })
+    })
+  })
   it('should return variables after calling mutate', async () => {
     const queryClient = createQueryClient()
     const variables: unknown[][] = []