@tanstack/react-query 5.59.10 → 5.59.12

package/src/__tests__/useQuery.test.tsx

@@ -7385,5 +7385,92 @@ describe('useQuery', () => {
       fireEvent.click(rendered.getByText('enable'))
       await waitFor(() => rendered.getByText('test1'))
     })
+
+    it('should show correct data when read from cache only (staleTime)', async () => {
+      const key = queryKey()
+      let suspenseRenderCount = 0
+      queryClient.setQueryData(key, 'initial')
+
+      function MyComponent(props: { promise: Promise<string> }) {
+        const data = React.use(props.promise)
+
+        return <>{data}</>
+      }
+
+      function Loading() {
+        suspenseRenderCount++
+        return <>loading..</>
+      }
+      function Page() {
+        const query = useQuery({
+          queryKey: key,
+          queryFn: async () => {
+            await sleep(1)
+            return 'test'
+          },
+          staleTime: Infinity,
+        })
+
+        return (
+          <React.Suspense fallback={<Loading />}>
+            <MyComponent promise={query.promise} />
+          </React.Suspense>
+        )
+      }
+
+      const rendered = renderWithClient(queryClient, <Page />)
+      await waitFor(() => rendered.getByText('initial'))
+
+      expect(suspenseRenderCount).toBe(0)
+    })
+
+    it('should show correct data when switching between cache entries without re-fetches', async () => {
+      const key = queryKey()
+
+      function MyComponent(props: { promise: Promise<string> }) {
+        const data = React.use(props.promise)
+
+        return <>{data}</>
+      }
+
+      function Loading() {
+        return <>loading..</>
+      }
+      function Page() {
+        const [count, setCount] = React.useState(0)
+        const query = useQuery({
+          queryKey: [key, count],
+          queryFn: async () => {
+            await sleep(10)
+            return 'test' + count
+          },
+          staleTime: Infinity,
+        })
+
+        return (
+          <div>
+            <React.Suspense fallback={<Loading />}>
+              <MyComponent promise={query.promise} />
+            </React.Suspense>
+            <button onClick={() => setCount(count + 1)}>inc</button>
+            <button onClick={() => setCount(count - 1)}>dec</button>
+          </div>
+        )
+      }
+
+      const rendered = renderWithClient(queryClient, <Page />)
+      await waitFor(() => rendered.getByText('loading..'))
+      await waitFor(() => rendered.getByText('test0'))
+
+      fireEvent.click(rendered.getByText('inc'))
+      await waitFor(() => rendered.getByText('loading..'))
+
+      await waitFor(() => rendered.getByText('test1'))
+
+      console.log('---------dec------------')
+      fireEvent.click(rendered.getByText('dec'))
+
+      await waitFor(() => rendered.getByText('test0'))
+    })
   })
 })

package/src/__tests__/useSuspenseQueries.test-d.tsx

@@ -89,6 +89,47 @@ describe('UseSuspenseQueries config object overload', () => {
     expectTypeOf(data).toEqualTypeOf<{ wow: boolean }>()
   })
 
+  it('should not allow skipToken in queryFn', () => {
+    useSuspenseQueries({
+      queries: [
+        {
+          queryKey: ['key'],
+          // @ts-expect-error
+          queryFn: skipToken,
+        },
+      ],
+    })
+
+    useSuspenseQueries({
+      queries: [
+        {
+          queryKey: ['key'],
+          // @ts-expect-error
+          queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5),
+        },
+      ],
+    })
+  })
+
+  it('TData should have correct type when conditional skipToken is passed', () => {
+    const queryResults = useSuspenseQueries({
+      queries: [
+        {
+          queryKey: ['withSkipToken'],
+          // @ts-expect-error
+          queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5),
+        },
+      ],
+    })
+
+    const firstResult = queryResults[0]
+
+    expectTypeOf(firstResult).toEqualTypeOf<
+      UseSuspenseQueryResult<number, Error>
+    >()
+    expectTypeOf(firstResult.data).toEqualTypeOf<number>()
+  })
+
   describe('custom hook', () => {
     it('should allow custom hooks using UseQueryOptions', () => {
       type Data = string
@@ -113,22 +154,4 @@ describe('UseSuspenseQueries config object overload', () => {
       expectTypeOf(data).toEqualTypeOf<Data>()
     })
   })
-
-  it('TData should have correct type when conditional skipToken is passed', () => {
-    const queryResults = useSuspenseQueries({
-      queries: [
-        {
-          queryKey: ['withSkipToken'],
-          queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5),
-        },
-      ],
-    })
-
-    const firstResult = queryResults[0]
-
-    expectTypeOf(firstResult).toEqualTypeOf<
-      UseSuspenseQueryResult<number, Error>
-    >()
-    expectTypeOf(firstResult.data).toEqualTypeOf<number>()
-  })
 })

package/src/index.ts

@@ -21,11 +21,13 @@ export { queryOptions } from './queryOptions'
 export type {
   DefinedInitialDataOptions,
   UndefinedInitialDataOptions,
+  UnusedSkipTokenOptions,
 } from './queryOptions'
 export { infiniteQueryOptions } from './infiniteQueryOptions'
 export type {
   DefinedInitialDataInfiniteOptions,
   UndefinedInitialDataInfiniteOptions,
+  UnusedSkipTokenInfiniteOptions,
 } from './infiniteQueryOptions'
 export {
   QueryClientContext,
@@ -36,6 +38,12 @@ export type { QueryClientProviderProps } from './QueryClientProvider'
 export type { QueryErrorResetBoundaryProps } from './QueryErrorResetBoundary'
 export { HydrationBoundary } from './HydrationBoundary'
 export type { HydrationBoundaryProps } from './HydrationBoundary'
+export type {
+  QueryErrorClearResetFunction,
+  QueryErrorIsResetFunction,
+  QueryErrorResetBoundaryFunction,
+  QueryErrorResetFunction,
+} from './QueryErrorResetBoundary'
 export {
   QueryErrorResetBoundary,
   useQueryErrorResetBoundary,

package/src/infiniteQueryOptions.ts

@@ -3,7 +3,9 @@ import type {
   DefaultError,
   InfiniteData,
   InitialDataFunction,
+  OmitKeyof,
   QueryKey,
+  SkipToken,
 } from '@tanstack/query-core'
 import type { UseInfiniteQueryOptions } from './types'
 
@@ -29,6 +31,36 @@ export type UndefinedInitialDataInfiniteOptions<
       >
 }
 
+export type UnusedSkipTokenInfiniteOptions<
+  TQueryFnData,
+  TError = DefaultError,
+  TData = InfiniteData<TQueryFnData>,
+  TQueryKey extends QueryKey = QueryKey,
+  TPageParam = unknown,
+> = OmitKeyof<
+  UseInfiniteQueryOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryFnData,
+    TQueryKey,
+    TPageParam
+  >,
+  'queryFn'
+> & {
+  queryFn: Exclude<
+    UseInfiniteQueryOptions<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryFnData,
+      TQueryKey,
+      TPageParam
+    >['queryFn'],
+    SkipToken
+  >
+}
+
 type NonUndefinedGuard<T> = T extends undefined ? never : T
 
 export type DefinedInitialDataInfiniteOptions<
@@ -75,6 +107,30 @@ export function infiniteQueryOptions<
   queryKey: DataTag<TQueryKey, InfiniteData<TQueryFnData>>
 }
 
+export function infiniteQueryOptions<
+  TQueryFnData,
+  TError = DefaultError,
+  TData = InfiniteData<TQueryFnData>,
+  TQueryKey extends QueryKey = QueryKey,
+  TPageParam = unknown,
+>(
+  options: UnusedSkipTokenInfiniteOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryKey,
+    TPageParam
+  >,
+): UnusedSkipTokenInfiniteOptions<
+  TQueryFnData,
+  TError,
+  TData,
+  TQueryKey,
+  TPageParam
+> & {
+  queryKey: DataTag<TQueryKey, InfiniteData<TQueryFnData>>
+}
+
 export function infiniteQueryOptions<
   TQueryFnData,
   TError = DefaultError,

package/src/queryOptions.ts

@@ -2,7 +2,9 @@ import type {
   DataTag,
   DefaultError,
   InitialDataFunction,
+  OmitKeyof,
   QueryKey,
+  SkipToken,
 } from '@tanstack/query-core'
 import type { UseQueryOptions } from './types'
 
@@ -18,6 +20,21 @@ export type UndefinedInitialDataOptions<
     | NonUndefinedGuard<TQueryFnData>
 }
 
+export type UnusedSkipTokenOptions<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+> = OmitKeyof<
+  UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+  'queryFn'
+> & {
+  queryFn: Exclude<
+    UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>['queryFn'],
+    SkipToken
+  >
+}
+
 type NonUndefinedGuard<T> = T extends undefined ? never : T
 
 export type DefinedInitialDataOptions<
@@ -42,6 +59,17 @@ export function queryOptions<
   queryKey: DataTag<TQueryKey, TQueryFnData>
 }
 
+export function queryOptions<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  options: UnusedSkipTokenOptions<TQueryFnData, TError, TData, TQueryKey>,
+): UnusedSkipTokenOptions<TQueryFnData, TError, TData, TQueryKey> & {
+  queryKey: DataTag<TQueryKey, TQueryFnData>
+}
+
 export function queryOptions<
   TQueryFnData = unknown,
   TError = DefaultError,

package/src/types.ts

@@ -14,6 +14,7 @@ import type {
   QueryKey,
   QueryObserverOptions,
   QueryObserverResult,
+  SkipToken,
 } from '@tanstack/query-core'
 
 export interface UseBaseQueryOptions<
@@ -47,8 +48,13 @@ export interface UseSuspenseQueryOptions<
   TQueryKey extends QueryKey = QueryKey,
 > extends OmitKeyof<
     UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
-    'enabled' | 'throwOnError' | 'placeholderData'
-  > {}
+    'queryFn' | 'enabled' | 'throwOnError' | 'placeholderData'
+  > {
+  queryFn: Exclude<
+    UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>['queryFn'],
+    SkipToken
+  >
+}
 
 export interface UseInfiniteQueryOptions<
   TQueryFnData = unknown,
@@ -85,8 +91,20 @@ export interface UseSuspenseInfiniteQueryOptions<
       TQueryKey,
       TPageParam
     >,
-    'enabled' | 'throwOnError' | 'placeholderData'
-  > {}
+    'queryFn' | 'enabled' | 'throwOnError' | 'placeholderData'
+  > {
+  queryFn: Exclude<
+    UseInfiniteQueryOptions<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryData,
+      TQueryKey,
+      TPageParam
+    >['queryFn'],
+    SkipToken
+  >
+}
 
 export type UseBaseQueryResult<
   TData = unknown,

package/src/useSuspenseInfiniteQuery.ts

@@ -33,7 +33,7 @@ export function useSuspenseInfiniteQuery<
   queryClient?: QueryClient,
 ): UseSuspenseInfiniteQueryResult<TData, TError> {
   if (process.env.NODE_ENV !== 'production') {
-    if (options.queryFn === skipToken) {
+    if ((options.queryFn as any) === skipToken) {
       console.error('skipToken is not allowed for useSuspenseInfiniteQuery')
     }
   }

package/src/useSuspenseQuery.ts

@@ -15,7 +15,7 @@ export function useSuspenseQuery<
   queryClient?: QueryClient,
 ): UseSuspenseQueryResult<TData, TError> {
   if (process.env.NODE_ENV !== 'production') {
-    if (options.queryFn === skipToken) {
+    if ((options.queryFn as any) === skipToken) {
       console.error('skipToken is not allowed for useSuspenseQuery')
     }
   }