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

package/src/__tests__/useQueries.test.tsx

@@ -1,16 +1,8 @@
-import { render, waitFor } from '@testing-library/react'
+import { fireEvent, render, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
 
-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,
@@ -20,6 +12,14 @@ import {
   renderWithClient,
   sleep,
 } from './utils'
+import type {
+  QueryFunction,
+  QueryKey,
+  QueryObserverResult,
+  UseQueryOptions,
+  UseQueryResult,
+} from '..'
+import type { QueryFunctionContext } from '@tanstack/query-core'
 
 describe('useQueries', () => {
   const queryCache = new QueryCache()
@@ -71,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()
@@ -144,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,
@@ -160,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,
@@ -304,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,
@@ -320,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,
@@ -423,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({
@@ -484,7 +484,6 @@ describe('useQueries', () => {
           queryKey: ['key', i] as const,
           queryFn: () => i + 10,
           select: (data: number) => data.toString(),
-          onSuccess: (_data: string) => null,
         })),
       })
 
@@ -494,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)
-            },
           },
         ],
       })
@@ -533,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,
           },
         ],
       })
@@ -645,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)
@@ -715,7 +690,7 @@ describe('useQueries', () => {
     }
   })
 
-  it("should throw error if in one of queries' queryFn throws and throwErrors is in use", async () => {
+  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)
@@ -732,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,
           },
           {
@@ -752,7 +727,7 @@ describe('useQueries', () => {
               Promise.reject(
                 new Error('this should not throw because query#2 already did'),
               ),
-            throwErrors: true,
+            throwOnError: true,
             retry: false,
           },
         ],
@@ -780,7 +755,7 @@ describe('useQueries', () => {
     consoleMock.mockRestore()
   })
 
-  it("should throw error if in one of queries' queryFn throws and throwErrors function resolves to true", async () => {
+  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)
@@ -797,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,
           },
           {
@@ -810,7 +785,7 @@ describe('useQueries', () => {
           {
             queryKey: key3,
             queryFn: () => Promise.reject(new Error('single query error')),
-            throwErrors: () => true,
+            throwOnError: () => true,
             retry: false,
           },
           {
@@ -819,7 +794,7 @@ describe('useQueries', () => {
               Promise.reject(
                 new Error('this should not throw because query#3 already did'),
               ),
-            throwErrors: true,
+            throwOnError: true,
             retry: false,
           },
         ],
@@ -873,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(5)
+                return Promise.resolve('first result ' + count)
+              },
+            },
+            {
+              queryKey: key2,
+              queryFn: async () => {
+                await sleep(50)
+                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(100)
+    // no further re-render because data didn't change
+    expect(results.length).toBe(5)
+  })
 })