@tanstack/react-query 5.8.3 → 5.8.6

package/src/__tests__/suspense.test.tsx

@@ -887,4 +887,150 @@ describe('useSuspenseQueries', () => {
     await waitFor(() => rendered.getByText('data: 1,2'))
     expect(refs[0]).toBe(refs[1])
   })
+
+  // this addresses the following issue:
+  // https://github.com/TanStack/query/issues/6344
+  it('should suspend on offline when query changes, and data should not be undefined', async () => {
+    function Page() {
+      const [id, setId] = React.useState(0)
+
+      const { data } = useSuspenseQuery({
+        queryKey: [id],
+        queryFn: () => Promise.resolve(`Data ${id}`),
+      })
+
+      // defensive guard here
+      if (data === undefined) {
+        throw new Error('data cannot be undefined')
+      }
+
+      return (
+        <>
+          <div>{data}</div>
+          <button onClick={() => setId(id + 1)}>fetch</button>
+        </>
+      )
+    }
+
+    const rendered = renderWithClient(
+      queryClient,
+      <React.Suspense fallback={<div>loading</div>}>
+        <Page />
+      </React.Suspense>,
+    )
+
+    await waitFor(() => rendered.getByText('loading'))
+    await waitFor(() => rendered.getByText('Data 0'))
+
+    // go offline
+    document.dispatchEvent(new CustomEvent('offline'))
+
+    fireEvent.click(rendered.getByText('fetch'))
+    await waitFor(() => rendered.getByText('Data 0'))
+
+    // go back online
+    document.dispatchEvent(new CustomEvent('online'))
+    fireEvent.click(rendered.getByText('fetch'))
+
+    // query should resume
+    await waitFor(() => rendered.getByText('Data 1'))
+  })
+
+  it('should throw error when queryKey changes and new query fails', async () => {
+    const consoleMock = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
+    const key = queryKey()
+
+    function Page() {
+      const [fail, setFail] = React.useState(false)
+      const { data } = useSuspenseQuery({
+        queryKey: [key, fail],
+        queryFn: async () => {
+          await sleep(10)
+
+          if (fail) {
+            throw new Error('Suspense Error Bingo')
+          } else {
+            return 'data'
+          }
+        },
+        retry: 0,
+      })
+
+      return (
+        <div>
+          <button onClick={() => setFail(true)}>trigger fail</button>
+
+          <div>rendered: {String(data)}</div>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(
+      queryClient,
+      <ErrorBoundary fallbackRender={() => <div>error boundary</div>}>
+        <React.Suspense fallback={'Loading...'}>
+          <Page />
+        </React.Suspense>
+      </ErrorBoundary>,
+    )
+
+    await waitFor(() => rendered.getByText('Loading...'))
+
+    await waitFor(() => rendered.getByText('rendered: data'))
+
+    fireEvent.click(rendered.getByText('trigger fail'))
+
+    await waitFor(() => rendered.getByText('error boundary'))
+
+    expect(consoleMock).toHaveBeenCalledWith(
+      expect.objectContaining(new Error('Suspense Error Bingo')),
+    )
+
+    consoleMock.mockRestore()
+  })
+
+  it('should keep previous data when wrapped in a transition', async () => {
+    const key = queryKey()
+
+    function Page() {
+      const [count, setCount] = React.useState(0)
+      const [isPending, startTransition] = React.useTransition()
+      const { data } = useSuspenseQuery({
+        queryKey: [key, count],
+        queryFn: async () => {
+          await sleep(10)
+          return 'data' + count
+        },
+      })
+
+      return (
+        <div>
+          <button onClick={() => startTransition(() => setCount(count + 1))}>
+            inc
+          </button>
+
+          <div>{isPending ? 'Pending...' : String(data)}</div>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(
+      queryClient,
+      <React.Suspense fallback={'Loading...'}>
+        <Page />
+      </React.Suspense>,
+    )
+
+    await waitFor(() => rendered.getByText('Loading...'))
+
+    await waitFor(() => rendered.getByText('data0'))
+
+    fireEvent.click(rendered.getByText('inc'))
+
+    await waitFor(() => rendered.getByText('Pending...'))
+
+    await waitFor(() => rendered.getByText('data1'))
+  })
 })

package/src/__tests__/useInfiniteQuery.test.tsx

@@ -1253,8 +1253,8 @@ describe('useInfiniteQuery', () => {
                   {isFetchingNextPage
                     ? 'Loading more...'
                     : hasNextPage
-                    ? 'Load More'
-                    : 'Nothing more to load'}
+                      ? 'Load More'
+                      : 'Nothing more to load'}
                 </button>
                 <button onClick={() => refetch()}>Refetch</button>
                 <button
@@ -1382,8 +1382,8 @@ describe('useInfiniteQuery', () => {
                   {isFetchingNextPage
                     ? 'Loading more...'
                     : hasNextPage
-                    ? 'Load More'
-                    : 'Nothing more to load'}
+                      ? 'Load More'
+                      : 'Nothing more to load'}
                 </button>
                 <button onClick={() => refetch()}>Refetch</button>
                 <button onClick={() => setIsRemovedLastPage(true)}>

package/src/__tests__/useQuery.test.tsx

@@ -1108,7 +1108,6 @@ describe('useQuery', () => {
 
   it('should use query function from hook when the existing query does not have a query function', async () => {
     const key = queryKey()
-    const results: Array<DefinedUseQueryResult<string>> = []
 
     queryClient.setQueryData(key, 'set')
 
@@ -1124,8 +1123,6 @@ describe('useQuery', () => {
         staleTime: Infinity,
       })
 
-      results.push(result)
-
       return (
         <div>
           <div>isFetching: {result.isFetching}</div>
@@ -1142,12 +1139,6 @@ describe('useQuery', () => {
     await waitFor(() => rendered.getByText('data: set'))
     fireEvent.click(rendered.getByRole('button', { name: /refetch/i }))
     await waitFor(() => rendered.getByText('data: fetched'))
-
-    await waitFor(() => expect(results.length).toBe(3))
-
-    expect(results[0]).toMatchObject({ data: 'set', isFetching: false })
-    expect(results[1]).toMatchObject({ data: 'set', isFetching: true })
-    expect(results[2]).toMatchObject({ data: 'fetched', isFetching: false })
   })
 
   it('should update query stale state and refetch when invalidated with invalidateQueries', async () => {

package/src/suspense.ts

@@ -40,8 +40,7 @@ export const shouldSuspend = (
     | DefaultedQueryObserverOptions<any, any, any, any, any>
     | undefined,
   result: QueryObserverResult<any, any>,
-  isRestoring: boolean,
-) => defaultedOptions?.suspense && willFetch(result, isRestoring)
+) => defaultedOptions?.suspense && result.isPending
 
 export const fetchOptimistic = <
   TQueryFnData,

package/src/useBaseQuery.ts

@@ -90,7 +90,11 @@ export function useBaseQuery<
   }, [defaultedOptions, observer])
 
   // Handle suspense
-  if (shouldSuspend(defaultedOptions, result, isRestoring)) {
+  if (shouldSuspend(defaultedOptions, result)) {
+    // Do the same thing as the effect right above because the effect won't run
+    // when we suspend but also, the component won't re-mount so our observer would
+    // be out of date.
+    observer.setOptions(defaultedOptions, { listeners: false })
     throw fetchOptimistic(defaultedOptions, observer, errorResetBoundary)
   }
 

package/src/useQueries.ts

@@ -57,68 +57,79 @@ type GetOptions<T> =
   }
     ? UseQueryOptionsForUseQueries<TQueryFnData, TError, TData>
     : T extends { queryFnData: infer TQueryFnData; error?: infer TError }
-    ? UseQueryOptionsForUseQueries<TQueryFnData, TError>
-    : T extends { data: infer TData; error?: infer TError }
-    ? UseQueryOptionsForUseQueries<unknown, TError, TData>
-    : // Part 2: responsible for applying explicit type parameter to function arguments, if tuple [TQueryFnData, TError, TData]
-    T extends [infer TQueryFnData, infer TError, infer TData]
-    ? UseQueryOptionsForUseQueries<TQueryFnData, TError, TData>
-    : T extends [infer TQueryFnData, infer TError]
-    ? UseQueryOptionsForUseQueries<TQueryFnData, TError>
-    : T extends [infer TQueryFnData]
-    ? UseQueryOptionsForUseQueries<TQueryFnData>
-    : // Part 3: responsible for inferring and enforcing type if no explicit parameter was provided
-    T extends {
-        queryFn?: QueryFunction<infer TQueryFnData, infer TQueryKey>
-        select: (data: any) => infer TData
-        throwOnError?: ThrowOnError<any, infer TError, any, any>
-      }
-    ? UseQueryOptionsForUseQueries<TQueryFnData, TError, TData, TQueryKey>
-    : T extends {
-        queryFn?: QueryFunction<infer TQueryFnData, infer TQueryKey>
-        throwOnError?: ThrowOnError<any, infer TError, any, any>
-      }
-    ? UseQueryOptionsForUseQueries<
-        TQueryFnData,
-        TError,
-        TQueryFnData,
-        TQueryKey
-      >
-    : // Fallback
-      UseQueryOptionsForUseQueries
+      ? UseQueryOptionsForUseQueries<TQueryFnData, TError>
+      : T extends { data: infer TData; error?: infer TError }
+        ? UseQueryOptionsForUseQueries<unknown, TError, TData>
+        : // Part 2: responsible for applying explicit type parameter to function arguments, if tuple [TQueryFnData, TError, TData]
+          T extends [infer TQueryFnData, infer TError, infer TData]
+          ? UseQueryOptionsForUseQueries<TQueryFnData, TError, TData>
+          : T extends [infer TQueryFnData, infer TError]
+            ? UseQueryOptionsForUseQueries<TQueryFnData, TError>
+            : T extends [infer TQueryFnData]
+              ? UseQueryOptionsForUseQueries<TQueryFnData>
+              : // Part 3: responsible for inferring and enforcing type if no explicit parameter was provided
+                T extends {
+                    queryFn?: QueryFunction<infer TQueryFnData, infer TQueryKey>
+                    select: (data: any) => infer TData
+                    throwOnError?: ThrowOnError<any, infer TError, any, any>
+                  }
+                ? UseQueryOptionsForUseQueries<
+                    TQueryFnData,
+                    TError,
+                    TData,
+                    TQueryKey
+                  >
+                : T extends {
+                      queryFn?: QueryFunction<
+                        infer TQueryFnData,
+                        infer TQueryKey
+                      >
+                      throwOnError?: ThrowOnError<any, infer TError, any, any>
+                    }
+                  ? UseQueryOptionsForUseQueries<
+                      TQueryFnData,
+                      TError,
+                      TQueryFnData,
+                      TQueryKey
+                    >
+                  : // Fallback
+                    UseQueryOptionsForUseQueries
 
 type GetResults<T> =
   // Part 1: responsible for mapping explicit type parameter to function result, if object
   T extends { queryFnData: any; error?: infer TError; data: infer TData }
     ? UseQueryResult<TData, TError>
     : T extends { queryFnData: infer TQueryFnData; error?: infer TError }
-    ? UseQueryResult<TQueryFnData, TError>
-    : T extends { data: infer TData; error?: infer TError }
-    ? UseQueryResult<TData, TError>
-    : // Part 2: responsible for mapping explicit type parameter to function result, if tuple
-    T extends [any, infer TError, infer TData]
-    ? UseQueryResult<TData, TError>
-    : T extends [infer TQueryFnData, infer TError]
-    ? UseQueryResult<TQueryFnData, TError>
-    : T extends [infer TQueryFnData]
-    ? UseQueryResult<TQueryFnData>
-    : // Part 3: responsible for mapping inferred type to results, if no explicit parameter was provided
-    T extends {
-        queryFn?: QueryFunction<unknown, any>
-        select: (data: any) => infer TData
-        throwOnError?: ThrowOnError<any, infer TError, any, any>
-      }
-    ? UseQueryResult<TData, unknown extends TError ? DefaultError : TError>
-    : T extends {
-        queryFn?: QueryFunction<infer TQueryFnData, any>
-        throwOnError?: ThrowOnError<any, infer TError, any, any>
-      }
-    ? UseQueryResult<
-        TQueryFnData,
-        unknown extends TError ? DefaultError : TError
-      >
-    : // Fallback
-      UseQueryResult
+      ? UseQueryResult<TQueryFnData, TError>
+      : T extends { data: infer TData; error?: infer TError }
+        ? UseQueryResult<TData, TError>
+        : // Part 2: responsible for mapping explicit type parameter to function result, if tuple
+          T extends [any, infer TError, infer TData]
+          ? UseQueryResult<TData, TError>
+          : T extends [infer TQueryFnData, infer TError]
+            ? UseQueryResult<TQueryFnData, TError>
+            : T extends [infer TQueryFnData]
+              ? UseQueryResult<TQueryFnData>
+              : // Part 3: responsible for mapping inferred type to results, if no explicit parameter was provided
+                T extends {
+                    queryFn?: QueryFunction<unknown, any>
+                    select: (data: any) => infer TData
+                    throwOnError?: ThrowOnError<any, infer TError, any, any>
+                  }
+                ? UseQueryResult<
+                    TData,
+                    unknown extends TError ? DefaultError : TError
+                  >
+                : T extends {
+                      queryFn?: QueryFunction<infer TQueryFnData, any>
+                      throwOnError?: ThrowOnError<any, infer TError, any, any>
+                    }
+                  ? UseQueryResult<
+                      TQueryFnData,
+                      unknown extends TError ? DefaultError : TError
+                    >
+                  : // Fallback
+                    UseQueryResult
 
 /**
  * QueriesOptions reducer recursively unwraps function arguments to infer/enforce type param
@@ -130,26 +141,37 @@ export type QueriesOptions<
 > = Depth['length'] extends MAXIMUM_DEPTH
   ? Array<UseQueryOptionsForUseQueries>
   : T extends []
-  ? []
-  : T extends [infer Head]
-  ? [...Result, GetOptions<Head>]
-  : T extends [infer Head, ...infer Tail]
-  ? QueriesOptions<[...Tail], [...Result, GetOptions<Head>], [...Depth, 1]>
-  : Array<unknown> extends T
-  ? T
-  : // If T is *some* array but we couldn't assign unknown[] to it, then it must hold some known/homogenous type!
-  // use this to infer the param types in the case of Array.map() argument
-  T extends Array<
-      UseQueryOptionsForUseQueries<
-        infer TQueryFnData,
-        infer TError,
-        infer TData,
-        infer TQueryKey
-      >
-    >
-  ? Array<UseQueryOptionsForUseQueries<TQueryFnData, TError, TData, TQueryKey>>
-  : // Fallback
-    Array<UseQueryOptionsForUseQueries>
+    ? []
+    : T extends [infer Head]
+      ? [...Result, GetOptions<Head>]
+      : T extends [infer Head, ...infer Tail]
+        ? QueriesOptions<
+            [...Tail],
+            [...Result, GetOptions<Head>],
+            [...Depth, 1]
+          >
+        : Array<unknown> extends T
+          ? T
+          : // If T is *some* array but we couldn't assign unknown[] to it, then it must hold some known/homogenous type!
+            // use this to infer the param types in the case of Array.map() argument
+            T extends Array<
+                UseQueryOptionsForUseQueries<
+                  infer TQueryFnData,
+                  infer TError,
+                  infer TData,
+                  infer TQueryKey
+                >
+              >
+            ? Array<
+                UseQueryOptionsForUseQueries<
+                  TQueryFnData,
+                  TError,
+                  TData,
+                  TQueryKey
+                >
+              >
+            : // Fallback
+              Array<UseQueryOptionsForUseQueries>
 
 /**
  * QueriesResults reducer recursively maps type param to results
@@ -161,28 +183,32 @@ export type QueriesResults<
 > = Depth['length'] extends MAXIMUM_DEPTH
   ? Array<UseQueryResult>
   : T extends []
-  ? []
-  : T extends [infer Head]
-  ? [...Result, GetResults<Head>]
-  : T extends [infer Head, ...infer Tail]
-  ? QueriesResults<[...Tail], [...Result, GetResults<Head>], [...Depth, 1]>
-  : T extends Array<
-      UseQueryOptionsForUseQueries<
-        infer TQueryFnData,
-        infer TError,
-        infer TData,
-        any
-      >
-    >
-  ? // Dynamic-size (homogenous) UseQueryOptions array: map directly to array of results
-    Array<
-      UseQueryResult<
-        unknown extends TData ? TQueryFnData : TData,
-        unknown extends TError ? DefaultError : TError
-      >
-    >
-  : // Fallback
-    Array<UseQueryResult>
+    ? []
+    : T extends [infer Head]
+      ? [...Result, GetResults<Head>]
+      : T extends [infer Head, ...infer Tail]
+        ? QueriesResults<
+            [...Tail],
+            [...Result, GetResults<Head>],
+            [...Depth, 1]
+          >
+        : T extends Array<
+              UseQueryOptionsForUseQueries<
+                infer TQueryFnData,
+                infer TError,
+                infer TData,
+                any
+              >
+            >
+          ? // Dynamic-size (homogenous) UseQueryOptions array: map directly to array of results
+            Array<
+              UseQueryResult<
+                unknown extends TData ? TQueryFnData : TData,
+                unknown extends TError ? DefaultError : TError
+              >
+            >
+          : // Fallback
+            Array<UseQueryResult>
 
 export function useQueries<
   T extends Array<any>,
@@ -260,7 +286,7 @@ export function useQueries<
   }, [defaultedQueries, options, observer])
 
   const shouldAtLeastOneSuspend = optimisticResult.some((result, index) =>
-    shouldSuspend(defaultedQueries[index], result, isRestoring),
+    shouldSuspend(defaultedQueries[index], result),
   )
 
   const suspensePromises = shouldAtLeastOneSuspend
@@ -269,7 +295,7 @@ export function useQueries<
 
         if (opts) {
           const queryObserver = new QueryObserver(client, opts)
-          if (shouldSuspend(opts, result, isRestoring)) {
+          if (shouldSuspend(opts, result)) {
             return fetchOptimistic(opts, queryObserver, errorResetBoundary)
           } else if (willFetch(result, isRestoring)) {
             void fetchOptimistic(opts, queryObserver, errorResetBoundary)
@@ -280,6 +306,13 @@ export function useQueries<
     : []
 
   if (suspensePromises.length > 0) {
+    observer.setQueries(
+      defaultedQueries,
+      options as QueriesObserverOptions<TCombinedResult>,
+      {
+        listeners: false,
+      },
+    )
     throw Promise.all(suspensePromises)
   }
   const observerQueries = observer.getQueries()