@tanstack/react-query 5.28.14 → 5.29.2

package/src/__tests__/useQueries.test.tsx

@@ -2,11 +2,13 @@ import { describe, expect, expectTypeOf, it, vi } from 'vitest'
 import { fireEvent, render, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
+import { QueryClient } from '@tanstack/query-core'
 import { QueryCache, queryOptions, skipToken, useQueries } from '..'
 import { createQueryClient, queryKey, renderWithClient, sleep } from './utils'
 import type {
   QueryFunction,
   QueryKey,
+  QueryObserverResult,
   UseQueryOptions,
   UseQueryResult,
 } from '..'
@@ -975,7 +977,7 @@ describe('useQueries', () => {
     )
   })
 
-  it.skip('should not return new instances when called without queries', async () => {
+  it('should not return new instances when called without queries', async () => {
     const key = queryKey()
     const ids: Array<number> = []
     let resultChanged = 0
@@ -1278,4 +1280,154 @@ describe('useQueries', () => {
 
     await waitFor(() => rendered.getByText('data: 1 result'))
   })
+
+  it('should optimize combine if it is a stable reference', async () => {
+    const key1 = queryKey()
+    const key2 = queryKey()
+
+    const client = new QueryClient()
+
+    const spy = vi.fn()
+    let value = 0
+
+    function Page() {
+      const [state, setState] = React.useState(0)
+      const queries = useQueries(
+        {
+          queries: [
+            {
+              queryKey: key1,
+              queryFn: async () => {
+                await sleep(10)
+                return 'first result:' + value
+              },
+            },
+            {
+              queryKey: key2,
+              queryFn: async () => {
+                await sleep(20)
+                return 'second result:' + value
+              },
+            },
+          ],
+          combine: React.useCallback((results: Array<QueryObserverResult>) => {
+            const result = {
+              combined: true,
+              res: results.map((res) => res.data).join(','),
+            }
+            spy(result)
+            return result
+          }, []),
+        },
+        client,
+      )
+
+      return (
+        <div>
+          <div>
+            data: {String(queries.combined)} {queries.res}
+          </div>
+          <button onClick={() => setState(state + 1)}>rerender</button>
+        </div>
+      )
+    }
+
+    const rendered = render(<Page />)
+
+    await waitFor(() =>
+      rendered.getByText('data: true first result:0,second result:0'),
+    )
+
+    // both pending, one pending, both resolved
+    expect(spy).toHaveBeenCalledTimes(3)
+
+    await client.refetchQueries()
+    // no increase because result hasn't changed
+    expect(spy).toHaveBeenCalledTimes(3)
+
+    fireEvent.click(rendered.getByRole('button', { name: /rerender/i }))
+
+    // no increase because just a re-render
+    expect(spy).toHaveBeenCalledTimes(3)
+
+    value = 1
+
+    await client.refetchQueries()
+
+    await waitFor(() =>
+      rendered.getByText('data: true first result:1,second result:1'),
+    )
+
+    // two value changes = two re-renders
+    expect(spy).toHaveBeenCalledTimes(5)
+  })
+
+  it('should re-run combine if the functional reference changes', async () => {
+    const key1 = queryKey()
+    const key2 = queryKey()
+
+    const client = new QueryClient()
+
+    const spy = vi.fn()
+
+    function Page() {
+      const [state, setState] = React.useState(0)
+      const queries = useQueries(
+        {
+          queries: [
+            {
+              queryKey: [key1],
+              queryFn: async () => {
+                await sleep(10)
+                return 'first result'
+              },
+            },
+            {
+              queryKey: [key2],
+              queryFn: async () => {
+                await sleep(20)
+                return 'second result'
+              },
+            },
+          ],
+          combine: React.useCallback(
+            (results: Array<QueryObserverResult>) => {
+              const result = {
+                combined: true,
+                state,
+                res: results.map((res) => res.data).join(','),
+              }
+              spy(result)
+              return result
+            },
+            [state],
+          ),
+        },
+        client,
+      )
+
+      return (
+        <div>
+          <div>
+            data: {String(queries.state)} {queries.res}
+          </div>
+          <button onClick={() => setState(state + 1)}>rerender</button>
+        </div>
+      )
+    }
+
+    const rendered = render(<Page />)
+
+    await waitFor(() =>
+      rendered.getByText('data: 0 first result,second result'),
+    )
+
+    // both pending, one pending, both resolved
+    expect(spy).toHaveBeenCalledTimes(3)
+
+    fireEvent.click(rendered.getByRole('button', { name: /rerender/i }))
+
+    // state changed, re-run combine
+    expect(spy).toHaveBeenCalledTimes(4)
+  })
 })

package/src/infiniteQueryOptions.ts

@@ -48,14 +48,14 @@ export function infiniteQueryOptions<
   TQueryKey extends QueryKey = QueryKey,
   TPageParam = unknown,
 >(
-  options: UndefinedInitialDataInfiniteOptions<
+  options: DefinedInitialDataInfiniteOptions<
     TQueryFnData,
     TError,
     TData,
     TQueryKey,
     TPageParam
   >,
-): UndefinedInitialDataInfiniteOptions<
+): DefinedInitialDataInfiniteOptions<
   TQueryFnData,
   TError,
   TData,
@@ -72,14 +72,14 @@ export function infiniteQueryOptions<
   TQueryKey extends QueryKey = QueryKey,
   TPageParam = unknown,
 >(
-  options: DefinedInitialDataInfiniteOptions<
+  options: UndefinedInitialDataInfiniteOptions<
     TQueryFnData,
     TError,
     TData,
     TQueryKey,
     TPageParam
   >,
-): DefinedInitialDataInfiniteOptions<
+): UndefinedInitialDataInfiniteOptions<
   TQueryFnData,
   TError,
   TData,

package/src/queryOptions.ts

@@ -29,8 +29,8 @@ export function queryOptions<
   TData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey,
 >(
-  options: UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
-): UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey> & {
+  options: DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
+): DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey> & {
   queryKey: DataTag<TQueryKey, TQueryFnData>
 }
 
@@ -40,8 +40,8 @@ export function queryOptions<
   TData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey,
 >(
-  options: DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
-): DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey> & {
+  options: UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
+): UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey> & {
   queryKey: DataTag<TQueryKey, TQueryFnData>
 }
 

package/src/useInfiniteQuery.ts

@@ -25,7 +25,7 @@ export function useInfiniteQuery<
   TQueryKey extends QueryKey = QueryKey,
   TPageParam = unknown,
 >(
-  options: UndefinedInitialDataInfiniteOptions<
+  options: DefinedInitialDataInfiniteOptions<
     TQueryFnData,
     TError,
     TData,
@@ -33,7 +33,7 @@ export function useInfiniteQuery<
     TPageParam
   >,
   queryClient?: QueryClient,
-): UseInfiniteQueryResult<TData, TError>
+): DefinedUseInfiniteQueryResult<TData, TError>
 
 export function useInfiniteQuery<
   TQueryFnData,
@@ -42,7 +42,7 @@ export function useInfiniteQuery<
   TQueryKey extends QueryKey = QueryKey,
   TPageParam = unknown,
 >(
-  options: DefinedInitialDataInfiniteOptions<
+  options: UndefinedInitialDataInfiniteOptions<
     TQueryFnData,
     TError,
     TData,
@@ -50,7 +50,7 @@ export function useInfiniteQuery<
     TPageParam
   >,
   queryClient?: QueryClient,
-): DefinedUseInfiniteQueryResult<TData, TError>
+): UseInfiniteQueryResult<TData, TError>
 
 export function useInfiniteQuery<
   TQueryFnData,

package/src/useQueries.ts

@@ -55,7 +55,7 @@ type UseQueryOptionsForUseQueries<
 // Avoid TS depth-limit error in case of large array literal
 type MAXIMUM_DEPTH = 20
 
-type GetOptions<T> =
+type GetUseQueryOptionsForUseQueries<T> =
   // Part 1: responsible for applying explicit type parameter to function arguments, if object { queryFnData: TQueryFnData, error: TError, data: TData }
   T extends {
     queryFnData: infer TQueryFnData
@@ -120,7 +120,7 @@ type GetDefinedOrUndefinedQueryResult<T, TData, TError = unknown> = T extends {
         : UseQueryResult<TData, TError>
   : UseQueryResult<TData, TError>
 
-type GetResults<T> =
+type GetUseQueryResult<T> =
   // Part 1: responsible for mapping explicit type parameter to function result, if object
   T extends { queryFnData: any; error?: infer TError; data: infer TData }
     ? GetDefinedOrUndefinedQueryResult<T, TData, TError>
@@ -165,18 +165,18 @@ type GetResults<T> =
  */
 export type QueriesOptions<
   T extends Array<any>,
-  TResult extends Array<any> = [],
+  TResults extends Array<any> = [],
   TDepth extends ReadonlyArray<number> = [],
 > = TDepth['length'] extends MAXIMUM_DEPTH
   ? Array<UseQueryOptionsForUseQueries>
   : T extends []
     ? []
     : T extends [infer Head]
-      ? [...TResult, GetOptions<Head>]
-      : T extends [infer Head, ...infer Tail]
+      ? [...TResults, GetUseQueryOptionsForUseQueries<Head>]
+      : T extends [infer Head, ...infer Tails]
         ? QueriesOptions<
-            [...Tail],
-            [...TResult, GetOptions<Head>],
+            [...Tails],
+            [...TResults, GetUseQueryOptionsForUseQueries<Head>],
             [...TDepth, 1]
           >
         : ReadonlyArray<unknown> extends T
@@ -207,18 +207,18 @@ export type QueriesOptions<
  */
 export type QueriesResults<
   T extends Array<any>,
-  TResult extends Array<any> = [],
+  TResults extends Array<any> = [],
   TDepth extends ReadonlyArray<number> = [],
 > = TDepth['length'] extends MAXIMUM_DEPTH
   ? Array<UseQueryResult>
   : T extends []
     ? []
     : T extends [infer Head]
-      ? [...TResult, GetResults<Head>]
-      : T extends [infer Head, ...infer Tail]
+      ? [...TResults, GetUseQueryResult<Head>]
+      : T extends [infer Head, ...infer Tails]
         ? QueriesResults<
-            [...Tail],
-            [...TResult, GetResults<Head>],
+            [...Tails],
+            [...TResults, GetUseQueryResult<Head>],
             [...TDepth, 1]
           >
         : T extends Array<

package/src/useQuery.ts

@@ -18,9 +18,9 @@ export function useQuery<
   TData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey,
 >(
-  options: UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
+  options: DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
   queryClient?: QueryClient,
-): UseQueryResult<TData, TError>
+): DefinedUseQueryResult<TData, TError>
 
 export function useQuery<
   TQueryFnData = unknown,
@@ -28,9 +28,9 @@ export function useQuery<
   TData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey,
 >(
-  options: DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
+  options: UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
   queryClient?: QueryClient,
-): DefinedUseQueryResult<TData, TError>
+): UseQueryResult<TData, TError>
 
 export function useQuery<
   TQueryFnData = unknown,

package/src/useSuspenseQueries.ts

@@ -13,7 +13,7 @@ import type {
 // Avoid TS depth-limit error in case of large array literal
 type MAXIMUM_DEPTH = 20
 
-type GetSuspenseOptions<T> =
+type GetUseSuspenseQueryOptions<T> =
   // Part 1: responsible for applying explicit type parameter to function arguments, if object { queryFnData: TQueryFnData, error: TError, data: TData }
   T extends {
     queryFnData: infer TQueryFnData
@@ -61,7 +61,7 @@ type GetSuspenseOptions<T> =
                   : // Fallback
                     UseSuspenseQueryOptions
 
-type GetSuspenseResults<T> =
+type GetUseSuspenseQueryResult<T> =
   // Part 1: responsible for mapping explicit type parameter to function result, if object
   T extends { queryFnData: any; error?: infer TError; data: infer TData }
     ? UseSuspenseQueryResult<TData, TError>
@@ -104,18 +104,18 @@ type GetSuspenseResults<T> =
  */
 export type SuspenseQueriesOptions<
   T extends Array<any>,
-  TResult extends Array<any> = [],
+  TResults extends Array<any> = [],
   TDepth extends ReadonlyArray<number> = [],
 > = TDepth['length'] extends MAXIMUM_DEPTH
   ? Array<UseSuspenseQueryOptions>
   : T extends []
     ? []
     : T extends [infer Head]
-      ? [...TResult, GetSuspenseOptions<Head>]
-      : T extends [infer Head, ...infer Tail]
+      ? [...TResults, GetUseSuspenseQueryOptions<Head>]
+      : T extends [infer Head, ...infer Tails]
         ? SuspenseQueriesOptions<
-            [...Tail],
-            [...TResult, GetSuspenseOptions<Head>],
+            [...Tails],
+            [...TResults, GetUseSuspenseQueryOptions<Head>],
             [...TDepth, 1]
           >
         : Array<unknown> extends T
@@ -141,18 +141,18 @@ export type SuspenseQueriesOptions<
  */
 export type SuspenseQueriesResults<
   T extends Array<any>,
-  TResult extends Array<any> = [],
+  TResults extends Array<any> = [],
   TDepth extends ReadonlyArray<number> = [],
 > = TDepth['length'] extends MAXIMUM_DEPTH
   ? Array<UseSuspenseQueryResult>
   : T extends []
     ? []
     : T extends [infer Head]
-      ? [...TResult, GetSuspenseResults<Head>]
-      : T extends [infer Head, ...infer Tail]
+      ? [...TResults, GetUseSuspenseQueryResult<Head>]
+      : T extends [infer Head, ...infer Tails]
         ? SuspenseQueriesResults<
-            [...Tail],
-            [...TResult, GetSuspenseResults<Head>],
+            [...Tails],
+            [...TResults, GetUseSuspenseQueryResult<Head>],
             [...TDepth, 1]
           >
         : T extends Array<