@tanstack/react-query 5.0.0-alpha.19 → 5.0.0-alpha.21

package/src/__tests__/suspense.test.tsx

@@ -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

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

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

@@ -144,10 +144,6 @@ describe('useQueries', () => {
               expectTypeNotAny(a)
               return a.toLowerCase()
             },
-            onSuccess: (a) => {
-              expectType<string>(a)
-              expectTypeNotAny(a)
-            },
             placeholderData: 'string',
             // @ts-expect-error (initialData: string)
             initialData: 123,
@@ -160,14 +156,6 @@ describe('useQueries', () => {
               expectTypeNotAny(a)
               return parseInt(a)
             },
-            onSuccess: (a) => {
-              expectType<number>(a)
-              expectTypeNotAny(a)
-            },
-            onError: (e) => {
-              expectType<boolean>(e)
-              expectTypeNotAny(e)
-            },
             placeholderData: 'string',
             // @ts-expect-error (initialData: string)
             initialData: 123,
@@ -304,10 +292,6 @@ describe('useQueries', () => {
               expectTypeNotAny(a)
               return a.toLowerCase()
             },
-            onSuccess: (a) => {
-              expectType<string>(a)
-              expectTypeNotAny(a)
-            },
             placeholderData: 'string',
             // @ts-expect-error (initialData: string)
             initialData: 123,
@@ -320,14 +304,6 @@ describe('useQueries', () => {
               expectTypeNotAny(a)
               return parseInt(a)
             },
-            onSuccess: (a) => {
-              expectType<number>(a)
-              expectTypeNotAny(a)
-            },
-            onError: (e) => {
-              expectType<boolean>(e)
-              expectTypeNotAny(e)
-            },
             placeholderData: 'string',
             // @ts-expect-error (initialData: string)
             initialData: 123,
@@ -423,60 +399,38 @@ describe('useQueries', () => {
         ],
       })
 
-      // select / onSuccess / onSettled params are "indirectly" enforced
+      // select params are "indirectly" enforced
       useQueries({
         queries: [
           // unfortunately TS will not suggest the type for you
           {
             queryKey: key1,
             queryFn: () => 'string',
-            // @ts-expect-error (noImplicitAny)
-            onSuccess: (a) => null,
-            // @ts-expect-error (noImplicitAny)
-            onSettled: (a) => null,
           },
           // however you can add a type to the callback
           {
             queryKey: key2,
             queryFn: () => 'string',
-            onSuccess: (a: string) => {
-              expectType<string>(a)
-              expectTypeNotAny(a)
-            },
-            onSettled: (a: string | undefined) => {
-              expectType<string | undefined>(a)
-              expectTypeNotAny(a)
-            },
           },
           // the type you do pass is enforced
           {
             queryKey: key3,
             queryFn: () => 'string',
-            // @ts-expect-error (only accepts string)
-            onSuccess: (a: number) => null,
           },
           {
             queryKey: key4,
             queryFn: () => 'string',
             select: (a: string) => parseInt(a),
-            // @ts-expect-error (select is defined => only accepts number)
-            onSuccess: (a: string) => null,
-            onSettled: (a: number | undefined) => {
-              expectType<number | undefined>(a)
-              expectTypeNotAny(a)
-            },
           },
         ],
       })
 
       // callbacks are also indirectly enforced with Array.map
       useQueries({
-        // @ts-expect-error (onSuccess only accepts string)
         queries: Array(50).map((_, i) => ({
           queryKey: ['key', i] as const,
           queryFn: () => i + 10,
           select: (data: number) => data.toString(),
-          onSuccess: (_data: number) => null,
         })),
       })
       useQueries({
@@ -484,7 +438,6 @@ describe('useQueries', () => {
           queryKey: ['key', i] as const,
           queryFn: () => i + 10,
           select: (data: number) => data.toString(),
-          onSuccess: (_data: string) => null,
         })),
       })
 
@@ -494,32 +447,15 @@ describe('useQueries', () => {
           {
             queryKey: key1,
             queryFn: () => 'string',
-            // @ts-expect-error (noImplicitAny)
-            onSuccess: (a) => null,
-            // @ts-expect-error (noImplicitAny)
-            onSettled: (a) => null,
           },
           {
             queryKey: key2,
             queryFn: () => 'string',
-            onSuccess: (a: string) => {
-              expectType<string>(a)
-              expectTypeNotAny(a)
-            },
-            onSettled: (a: string | undefined) => {
-              expectType<string | undefined>(a)
-              expectTypeNotAny(a)
-            },
           },
           {
             queryKey: key4,
             queryFn: () => 'string',
             select: (a: string) => parseInt(a),
-            onSuccess: (_a: number) => null,
-            onSettled: (a: number | undefined) => {
-              expectType<number | undefined>(a)
-              expectTypeNotAny(a)
-            },
           },
         ],
       })
@@ -533,12 +469,6 @@ describe('useQueries', () => {
           {
             queryKey: key1,
             queryFn: () => Promise.resolve('string'),
-            onSuccess: (a: string) => {
-              expectType<string>(a)
-              expectTypeNotAny(a)
-            },
-            // @ts-expect-error (refuses to accept a Promise)
-            onSettled: (a: Promise<string>) => null,
           },
         ],
       })
@@ -645,11 +575,10 @@ describe('useQueries', () => {
         queries: queries.map(
           // no need to type the mapped query
           (query) => {
-            const { queryFn: fn, queryKey: key, onError: err } = query
+            const { queryFn: fn, queryKey: key } = query
             expectType<QueryFunction<TQueryFnData, TQueryKey> | undefined>(fn)
             return {
               queryKey: key,
-              onError: err,
               queryFn: fn
                 ? (ctx: QueryFunctionContext<TQueryKey>) => {
                     expectType<TQueryKey>(ctx.queryKey)

package/src/__tests__/useQuery.test.tsx

@@ -64,23 +64,17 @@ describe('useQuery', () => {
       useQuery({
         queryKey: [key],
         queryFn: async () => true,
-        onSuccess: (data) => expectType<boolean>(data),
-        onSettled: (data) => expectType<boolean | undefined>(data),
       })
 
       // it should be possible to specify a union type as result type
       const unionTypeSync = useQuery({
         queryKey: key,
         queryFn: () => (Math.random() > 0.5 ? 'a' : 'b'),
-
-        onSuccess: (data) => expectType<'a' | 'b'>(data),
       })
       expectType<'a' | 'b' | undefined>(unionTypeSync.data)
       const unionTypeAsync = useQuery<'a' | 'b'>({
         queryKey: key,
         queryFn: () => Promise.resolve(Math.random() > 0.5 ? 'a' : 'b'),
-
-        onSuccess: (data) => expectType<'a' | 'b'>(data),
       })
       expectType<'a' | 'b' | undefined>(unionTypeAsync.data)
 
@@ -450,255 +444,6 @@ describe('useQuery', () => {
     })
   })
 
-  it('should call onSuccess after a query has been fetched', async () => {
-    const key = queryKey()
-    const states: UseQueryResult<string>[] = []
-    const onSuccess = vi.fn()
-
-    function Page() {
-      const state = useQuery({
-        queryKey: key,
-        queryFn: async () => {
-          await sleep(10)
-          return 'data'
-        },
-        onSuccess,
-      })
-      states.push(state)
-      return <div>data: {state.data}</div>
-    }
-
-    const rendered = renderWithClient(queryClient, <Page />)
-
-    await rendered.findByText('data: data')
-    expect(states.length).toBe(2)
-    expect(onSuccess).toHaveBeenCalledTimes(1)
-    expect(onSuccess).toHaveBeenCalledWith('data')
-  })
-
-  it('should call onSuccess after a query has been refetched', async () => {
-    const key = queryKey()
-    const states: UseQueryResult<string>[] = []
-    const onSuccess = vi.fn()
-    let count = 0
-
-    function Page() {
-      const state = useQuery({
-        queryKey: key,
-        queryFn: async () => {
-          count++
-          await sleep(10)
-          return 'data' + count
-        },
-        onSuccess,
-      })
-
-      states.push(state)
-
-      return (
-        <div>
-          <div>data: {state.data}</div>
-          <button onClick={() => state.refetch()}>refetch</button>
-        </div>
-      )
-    }
-
-    const rendered = renderWithClient(queryClient, <Page />)
-
-    await rendered.findByText('data: data1')
-    fireEvent.click(rendered.getByRole('button', { name: /refetch/i }))
-    await rendered.findByText('data: data2')
-
-    expect(states.length).toBe(3) //pending, success, success after refetch
-    expect(count).toBe(2)
-    expect(onSuccess).toHaveBeenCalledTimes(2)
-  })
-
-  it('should call onSuccess after a disabled query has been fetched', async () => {
-    const key = queryKey()
-    const states: UseQueryResult<string>[] = []
-    const onSuccess = vi.fn()
-
-    function Page() {
-      const state = useQuery({
-        queryKey: key,
-        queryFn: () => 'data',
-        enabled: false,
-        onSuccess,
-      })
-
-      states.push(state)
-
-      return (
-        <div>
-          <div>isSuccess: {state.isSuccess ? 'true' : 'false'}</div>
-          <button onClick={() => state.refetch()}>refetch</button>
-        </div>
-      )
-    }
-
-    const rendered = renderWithClient(queryClient, <Page />)
-
-    await waitFor(() => {
-      rendered.getByText('isSuccess: false')
-    })
-
-    fireEvent.click(rendered.getByRole('button', { name: 'refetch' }))
-
-    await waitFor(() => {
-      rendered.getByText('isSuccess: true')
-    })
-
-    expect(onSuccess).toHaveBeenCalledTimes(1)
-    expect(onSuccess).toHaveBeenCalledWith('data')
-  })
-
-  it('should not call onSuccess if a component has unmounted', async () => {
-    const key = queryKey()
-    const states: UseQueryResult<string>[] = []
-    const onSuccess = vi.fn()
-
-    function Page() {
-      const [show, setShow] = React.useState(true)
-
-      React.useEffect(() => {
-        setShow(false)
-      }, [setShow])
-
-      return show ? <Component /> : null
-    }
-
-    function Component() {
-      const state = useQuery({
-        queryKey: key,
-        queryFn: async () => {
-          await sleep(10)
-          return 'data'
-        },
-        onSuccess,
-      })
-      states.push(state)
-      return null
-    }
-
-    renderWithClient(queryClient, <Page />)
-
-    await sleep(50)
-    expect(states.length).toBe(1)
-    expect(onSuccess).toHaveBeenCalledTimes(0)
-  })
-
-  it('should call onError after a query has been fetched with an error', async () => {
-    const key = queryKey()
-    const states: UseQueryResult<unknown>[] = []
-    const onError = vi.fn()
-
-    function Page() {
-      const state = useQuery<unknown>({
-        queryKey: key,
-        queryFn: () => Promise.reject(new Error('error')),
-        retry: false,
-        onError,
-      })
-      states.push(state)
-      return null
-    }
-
-    renderWithClient(queryClient, <Page />)
-
-    await sleep(10)
-    expect(states.length).toBe(2)
-    expect(onError).toHaveBeenCalledTimes(1)
-    expect(onError).toHaveBeenCalledWith(new Error('error'))
-  })
-
-  it('should not call onError when receiving a CancelledError', async () => {
-    const key = queryKey()
-    const onError = vi.fn()
-
-    function Page() {
-      const { status, fetchStatus } = useQuery({
-        queryKey: key,
-        queryFn: async () => {
-          await sleep(10)
-          return 23
-        },
-
-        onError,
-      })
-      return (
-        <span>
-          status: {status}, fetchStatus: {fetchStatus}
-        </span>
-      )
-    }
-
-    const rendered = renderWithClient(queryClient, <Page />)
-
-    rendered.getByText('status: pending, fetchStatus: fetching')
-
-    await queryClient.cancelQueries({ queryKey: key })
-    // query cancellation will reset the query to it's initial state
-    await waitFor(() =>
-      rendered.getByText('status: pending, fetchStatus: idle'),
-    )
-    expect(onError).not.toHaveBeenCalled()
-  })
-
-  it('should call onSettled after a query has been fetched', async () => {
-    const key = queryKey()
-    const states: UseQueryResult<string>[] = []
-    const onSettled = vi.fn()
-
-    function Page() {
-      const state = useQuery({
-        queryKey: key,
-        queryFn: () => 'data',
-        onSettled,
-      })
-      states.push(state)
-
-      return <div>data: {state.data}</div>
-    }
-
-    const rendered = renderWithClient(queryClient, <Page />)
-
-    await waitFor(() => {
-      rendered.getByText('data: data')
-    })
-
-    expect(states.length).toBe(2)
-    expect(onSettled).toHaveBeenCalledTimes(1)
-    expect(onSettled).toHaveBeenCalledWith('data', null)
-  })
-
-  it('should call onSettled after a query has been fetched with an error', async () => {
-    const key = queryKey()
-    const onSettled = vi.fn()
-    const error = new Error('error')
-
-    function Page() {
-      const state = useQuery({
-        queryKey: key,
-        queryFn: async () => {
-          await sleep(10)
-          return Promise.reject(error)
-        },
-        retry: false,
-        onSettled,
-      })
-      return <div>status: {state.status}</div>
-    }
-
-    const rendered = renderWithClient(queryClient, <Page />)
-
-    await waitFor(() => {
-      rendered.getByText('status: error')
-    })
-    expect(onSettled).toHaveBeenCalledTimes(1)
-    expect(onSettled).toHaveBeenCalledWith(undefined, error)
-  })
-
   it('should not cancel an ongoing fetch when refetch is called with cancelRefetch=false if we have data already', async () => {
     const key = queryKey()
     let fetchCount = 0
@@ -2587,53 +2332,6 @@ describe('useQuery', () => {
     expect(renders).toBe(2)
   })
 
-  it('should batch re-renders including hook callbacks', async () => {
-    const key = queryKey()
-
-    let renders = 0
-    let callbackCount = 0
-
-    const queryFn = async () => {
-      await sleep(10)
-      return 'data'
-    }
-
-    function Page() {
-      const [count, setCount] = React.useState(0)
-      useQuery({
-        queryKey: key,
-        queryFn,
-        onSuccess: () => {
-          setCount((x) => x + 1)
-        },
-      })
-      useQuery({
-        queryKey: key,
-        queryFn,
-        onSuccess: () => {
-          setCount((x) => x + 1)
-        },
-      })
-
-      React.useEffect(() => {
-        renders++
-        callbackCount = count
-      })
-
-      return <div>count: {count}</div>
-    }
-
-    const rendered = renderWithClient(queryClient, <Page />)
-
-    await waitFor(() => rendered.getByText('count: 2'))
-
-    // Should be 3 instead of 5
-    expect(renders).toBe(3)
-
-    // Both callbacks should have been executed
-    expect(callbackCount).toBe(2)
-  })
-
   it('should render latest data even if react has discarded certain renders', async () => {
     const key = queryKey()
 
@@ -6126,36 +5824,6 @@ describe('useQuery', () => {
     })
   })
 
-  it('setQueryData - should not call onSuccess callback of active observers', async () => {
-    const key = queryKey()
-    const onSuccess = vi.fn()
-
-    function Page() {
-      const state = useQuery({
-        queryKey: key,
-        queryFn: () => 'data',
-        onSuccess,
-      })
-      return (
-        <div>
-          <div>data: {state.data}</div>
-          <button onClick={() => queryClient.setQueryData(key, 'newData')}>
-            setQueryData
-          </button>
-        </div>
-      )
-    }
-
-    const rendered = renderWithClient(queryClient, <Page />)
-
-    await waitFor(() => rendered.getByText('data: data'))
-    fireEvent.click(rendered.getByRole('button', { name: /setQueryData/i }))
-    await waitFor(() => rendered.getByText('data: newData'))
-
-    expect(onSuccess).toHaveBeenCalledTimes(1)
-    expect(onSuccess).toHaveBeenCalledWith('data')
-  })
-
   it('setQueryData - should respect updatedAt', async () => {
     const key = queryKey()
 

package/src/suspense.ts

@@ -46,14 +46,6 @@ export const fetchOptimistic = <
   observer: QueryObserver<TQueryFnData, TError, TData, TQueryData, TQueryKey>,
   errorResetBoundary: QueryErrorResetBoundaryValue,
 ) =>
-  observer
-    .fetchOptimistic(defaultedOptions)
-    .then(({ data }) => {
-      defaultedOptions.onSuccess?.(data as TData)
-      defaultedOptions.onSettled?.(data, null)
-    })
-    .catch((error) => {
-      errorResetBoundary.clearReset()
-      defaultedOptions.onError?.(error)
-      defaultedOptions.onSettled?.(undefined, error)
-    })
+  observer.fetchOptimistic(defaultedOptions).catch(() => {
+    errorResetBoundary.clearReset()
+  })