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

package/src/__tests__/useMutationState.test.tsx

@@ -4,12 +4,12 @@ import { useIsMutating, useMutationState } from '../useMutationState'
 import { useMutation } from '../useMutation'
 import {
   createQueryClient,
+  doNotExecute,
   renderWithClient,
   setActTimeout,
   sleep,
 } from './utils'
-import * as MutationCacheModule from '../../../query-core/src/mutationCache'
-import { screen } from 'solid-testing-library'
+import type { MutationState, MutationStatus } from '@tanstack/query-core'
 
 describe('useIsMutating', () => {
   it('should return the number of fetching mutations', async () => {
@@ -140,61 +140,6 @@ describe('useIsMutating', () => {
     await waitFor(() => expect(isMutatings).toEqual([0, 1, 0]))
   })
 
-  it('should not change state if unmounted', async () => {
-    // We have to mock the MutationCache to not unsubscribe
-    // the listener when the component is unmounted
-    class MutationCacheMock extends MutationCacheModule.MutationCache {
-      subscribe(listener: any) {
-        super.subscribe(listener)
-        return () => void 0
-      }
-    }
-
-    const MutationCacheSpy = jest
-      .spyOn(MutationCacheModule, 'MutationCache')
-      .mockImplementation((fn) => {
-        return new MutationCacheMock(fn)
-      })
-
-    const queryClient = createQueryClient()
-
-    function IsMutating() {
-      useIsMutating()
-      return null
-    }
-
-    function Page() {
-      const [mounted, setMounted] = React.useState(true)
-      const { mutate: mutate1 } = useMutation({
-        mutationKey: ['mutation1'],
-        mutationFn: async () => {
-          await sleep(10)
-          return 'data'
-        },
-      })
-
-      React.useEffect(() => {
-        mutate1()
-      }, [mutate1])
-
-      return (
-        <div>
-          <button onClick={() => setMounted(false)}>unmount</button>
-          {mounted && <IsMutating />}
-        </div>
-      )
-    }
-
-    const { getByText } = renderWithClient(queryClient, <Page />)
-    fireEvent.click(getByText('unmount'))
-
-    // Should not display the console error
-    // "Warning: Can't perform a React state update on an unmounted component"
-
-    await sleep(20)
-    MutationCacheSpy.mockRestore()
-  })
-
   it('should use provided custom queryClient', async () => {
     const queryClient = createQueryClient()
 
@@ -229,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[][] = []
@@ -275,7 +241,7 @@ describe('useMutationState', () => {
 
     await waitFor(() => rendered.getByText('data: null'))
 
-    fireEvent.click(screen.getByRole('button', { name: /mutate/i }))
+    fireEvent.click(rendered.getByRole('button', { name: /mutate/i }))
 
     await waitFor(() => rendered.getByText('data: data1'))
 

package/src/__tests__/useQueries.test.tsx

@@ -1,9 +1,17 @@
-import { fireEvent, render, waitFor } from '@testing-library/react'
+import { render, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
 
-import * as QueriesObserverModule from '../../../query-core/src/queriesObserver'
-
+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,
   expectType,
@@ -12,15 +20,6 @@ import {
   renderWithClient,
   sleep,
 } from './utils'
-import type {
-  QueryFunction,
-  QueryKey,
-  QueryObserverResult,
-  UseQueryOptions,
-  UseQueryResult,
-} from '..'
-import { QueriesObserver, QueryCache, useQueries } from '..'
-import type { QueryFunctionContext } from '@tanstack/query-core'
 
 describe('useQueries', () => {
   const queryCache = new QueryCache()
@@ -145,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,
@@ -161,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,
@@ -305,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,
@@ -321,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,
@@ -424,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({
@@ -485,7 +438,6 @@ describe('useQueries', () => {
           queryKey: ['key', i] as const,
           queryFn: () => i + 10,
           select: (data: number) => data.toString(),
-          onSuccess: (_data: string) => null,
         })),
       })
 
@@ -495,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)
-            },
           },
         ],
       })
@@ -534,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,
           },
         ],
       })
@@ -646,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)
@@ -716,67 +644,8 @@ describe('useQueries', () => {
     }
   })
 
-  it('should not change state if unmounted', async () => {
-    const key1 = queryKey()
-
-    // We have to mock the QueriesObserver to not unsubscribe
-    // the listener when the component is unmounted
-    class QueriesObserverMock extends QueriesObserver {
-      subscribe(listener: any) {
-        super.subscribe(listener)
-        return () => void 0
-      }
-    }
-
-    const QueriesObserverSpy = jest
-      .spyOn(QueriesObserverModule, 'QueriesObserver')
-      .mockImplementation((fn) => {
-        return new QueriesObserverMock(fn)
-      })
-
-    function Queries() {
-      useQueries({
-        queries: [
-          {
-            queryKey: key1,
-            queryFn: async () => {
-              await sleep(10)
-              return 1
-            },
-          },
-        ],
-      })
-
-      return (
-        <div>
-          <span>queries</span>
-        </div>
-      )
-    }
-
-    function Page() {
-      const [mounted, setMounted] = React.useState(true)
-
-      return (
-        <div>
-          <button onClick={() => setMounted(false)}>unmount</button>
-          {mounted && <Queries />}
-        </div>
-      )
-    }
-
-    const { getByText } = renderWithClient(queryClient, <Page />)
-    fireEvent.click(getByText('unmount'))
-
-    // Should not display the console error
-    // "Warning: Can't perform a React state update on an unmounted component"
-
-    await sleep(20)
-    QueriesObserverSpy.mockRestore()
-  })
-
   it("should throw error if in one of queries' queryFn throws and throwErrors is in use", async () => {
-    const consoleMock = jest
+    const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
     const key1 = queryKey()
@@ -841,7 +710,7 @@ describe('useQueries', () => {
   })
 
   it("should throw error if in one of queries' queryFn throws and throwErrors function resolves to true", async () => {
-    const consoleMock = jest
+    const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
     const key1 = queryKey()
@@ -914,15 +783,17 @@ describe('useQueries', () => {
     }
 
     function Page() {
-      const queries = useQueries({
-        queries: [
-          {
-            queryKey: key,
-            queryFn,
-          },
-        ],
+      const queries = useQueries(
+        {
+          queries: [
+            {
+              queryKey: key,
+              queryFn,
+            },
+          ],
+        },
         queryClient,
-      })
+      )
 
       return <div>data: {queries[0].data}</div>
     }