@tanstack/react-query 5.0.0-alpha.4 → 5.0.0-alpha.43

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

@@ -2,8 +2,16 @@ import { fireEvent, 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()
@@ -72,6 +71,52 @@ describe('useQueries', () => {
     expect(results[2]).toMatchObject([{ data: 1 }, { data: 2 }])
   })
 
+  it('should track results', async () => {
+    const key1 = queryKey()
+    const results: UseQueryResult[][] = []
+    let count = 0
+
+    function Page() {
+      const result = useQueries({
+        queries: [
+          {
+            queryKey: key1,
+            queryFn: async () => {
+              await sleep(10)
+              count++
+              return count
+            },
+          },
+        ],
+      })
+      results.push(result)
+
+      return (
+        <div>
+          <div>data: {String(result[0].data ?? 'null')} </div>
+          <button onClick={() => result[0].refetch()}>refetch</button>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(queryClient, <Page />)
+
+    await waitFor(() => rendered.getByText('data: 1'))
+
+    expect(results.length).toBe(2)
+    expect(results[0]).toMatchObject([{ data: undefined }])
+    expect(results[1]).toMatchObject([{ data: 1 }])
+
+    fireEvent.click(rendered.getByRole('button', { name: /refetch/i }))
+
+    await waitFor(() => rendered.getByText('data: 2'))
+
+    // only one render for data update, no render for isFetching transition
+    expect(results.length).toBe(3)
+
+    expect(results[2]).toMatchObject([{ data: 2 }])
+  })
+
   it('handles type parameter - tuple of tuples', async () => {
     const key1 = queryKey()
     const key2 = queryKey()
@@ -145,10 +190,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 +202,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 +338,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 +350,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 +445,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 +484,6 @@ describe('useQueries', () => {
           queryKey: ['key', i] as const,
           queryFn: () => i + 10,
           select: (data: number) => data.toString(),
-          onSuccess: (_data: string) => null,
         })),
       })
 
@@ -495,32 +493,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 +515,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 +621,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 +690,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
+  it("should throw error if in one of queries' queryFn throws and throwOnError is in use", async () => {
+    const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
     const key1 = queryKey()
@@ -792,14 +707,14 @@ describe('useQueries', () => {
             queryFn: () =>
               Promise.reject(
                 new Error(
-                  'this should not throw because throwErrors is not set',
+                  'this should not throw because throwOnError is not set',
                 ),
               ),
           },
           {
             queryKey: key2,
             queryFn: () => Promise.reject(new Error('single query error')),
-            throwErrors: true,
+            throwOnError: true,
             retry: false,
           },
           {
@@ -812,7 +727,7 @@ describe('useQueries', () => {
               Promise.reject(
                 new Error('this should not throw because query#2 already did'),
               ),
-            throwErrors: true,
+            throwOnError: true,
             retry: false,
           },
         ],
@@ -840,8 +755,8 @@ describe('useQueries', () => {
     consoleMock.mockRestore()
   })
 
-  it("should throw error if in one of queries' queryFn throws and throwErrors function resolves to true", async () => {
-    const consoleMock = jest
+  it("should throw error if in one of queries' queryFn throws and throwOnError function resolves to true", async () => {
+    const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
     const key1 = queryKey()
@@ -857,10 +772,10 @@ describe('useQueries', () => {
             queryFn: () =>
               Promise.reject(
                 new Error(
-                  'this should not throw because throwErrors function resolves to false',
+                  'this should not throw because throwOnError function resolves to false',
                 ),
               ),
-            throwErrors: () => false,
+            throwOnError: () => false,
             retry: false,
           },
           {
@@ -870,7 +785,7 @@ describe('useQueries', () => {
           {
             queryKey: key3,
             queryFn: () => Promise.reject(new Error('single query error')),
-            throwErrors: () => true,
+            throwOnError: () => true,
             retry: false,
           },
           {
@@ -879,7 +794,7 @@ describe('useQueries', () => {
               Promise.reject(
                 new Error('this should not throw because query#3 already did'),
               ),
-            throwErrors: true,
+            throwOnError: true,
             retry: false,
           },
         ],
@@ -933,4 +848,152 @@ describe('useQueries', () => {
 
     await waitFor(() => rendered.getByText('data: custom client'))
   })
+
+  it('should combine queries', async () => {
+    const key1 = queryKey()
+    const key2 = queryKey()
+
+    function Page() {
+      const queries = useQueries(
+        {
+          queries: [
+            {
+              queryKey: key1,
+              queryFn: () => Promise.resolve('first result'),
+            },
+            {
+              queryKey: key2,
+              queryFn: () => Promise.resolve('second result'),
+            },
+          ],
+          combine: (results) => {
+            return {
+              combined: true,
+              res: results.map((res) => res.data).join(','),
+            }
+          },
+        },
+        queryClient,
+      )
+
+      return (
+        <div>
+          <div>
+            data: {String(queries.combined)} {queries.res}
+          </div>
+        </div>
+      )
+    }
+
+    const rendered = render(<Page />)
+
+    await waitFor(() =>
+      rendered.getByText('data: true first result,second result'),
+    )
+  })
+
+  it('should track property access through combine function', async () => {
+    const key1 = queryKey()
+    const key2 = queryKey()
+    let count = 0
+    const results: Array<unknown> = []
+
+    function Page() {
+      const queries = useQueries(
+        {
+          queries: [
+            {
+              queryKey: key1,
+              queryFn: async () => {
+                await sleep(10)
+                return Promise.resolve('first result ' + count)
+              },
+            },
+            {
+              queryKey: key2,
+              queryFn: async () => {
+                await sleep(20)
+                return Promise.resolve('second result ' + count)
+              },
+            },
+          ],
+          combine: (queryResults) => {
+            return {
+              combined: true,
+              refetch: () => queryResults.forEach((res) => res.refetch()),
+              res: queryResults
+                .flatMap((res) => (res.data ? [res.data] : []))
+                .join(','),
+            }
+          },
+        },
+        queryClient,
+      )
+
+      results.push(queries)
+
+      return (
+        <div>
+          <div>
+            data: {String(queries.combined)} {queries.res}
+          </div>
+          <button onClick={() => queries.refetch()}>refetch</button>
+        </div>
+      )
+    }
+
+    const rendered = render(<Page />)
+
+    await waitFor(() =>
+      rendered.getByText('data: true first result 0,second result 0'),
+    )
+
+    expect(results.length).toBe(3)
+
+    expect(results[0]).toStrictEqual({
+      combined: true,
+      refetch: expect.any(Function),
+      res: '',
+    })
+
+    expect(results[1]).toStrictEqual({
+      combined: true,
+      refetch: expect.any(Function),
+      res: 'first result 0',
+    })
+
+    expect(results[2]).toStrictEqual({
+      combined: true,
+      refetch: expect.any(Function),
+      res: 'first result 0,second result 0',
+    })
+
+    count++
+
+    fireEvent.click(rendered.getByRole('button', { name: /refetch/i }))
+
+    await waitFor(() =>
+      rendered.getByText('data: true first result 1,second result 1'),
+    )
+
+    expect(results.length).toBe(5)
+
+    expect(results[3]).toStrictEqual({
+      combined: true,
+      refetch: expect.any(Function),
+      res: 'first result 1,second result 0',
+    })
+
+    expect(results[4]).toStrictEqual({
+      combined: true,
+      refetch: expect.any(Function),
+      res: 'first result 1,second result 1',
+    })
+
+    fireEvent.click(rendered.getByRole('button', { name: /refetch/i }))
+
+    await sleep(50)
+    // no further re-render because data didn't change
+    expect(results.length).toBe(5)
+  })
 })