refactor: handle type error when skipToken is present in suspense query

packages/react-query/src/__tests__/prefetch.test.tsx

@@ -12,7 +12,11 @@ import {
 } from '..'
 import { createQueryClient, queryKey, renderWithClient, sleep } from './utils'
 
-import type { InfiniteData, UseInfiniteQueryOptions, UseQueryOptions } from '..'
+import type {
+  InfiniteData,
+  UseSuspenseInfiniteQueryOptions,
+  UseSuspenseQueryOptions,
+} from '..'
 import type { Mock } from 'vitest'
 
 const generateQueryFn = (data: string) =>
@@ -56,7 +60,7 @@ describe('usePrefetchQuery', () => {
   const queryClient = createQueryClient({ queryCache })
 
   function Suspended<TData = unknown>(props: {
-    queryOpts: UseQueryOptions<TData, Error, TData, Array<string>>
+    queryOpts: UseSuspenseQueryOptions<TData, Error, TData, Array<string>>
     children?: React.ReactNode
   }) {
     const state = useSuspenseQuery(props.queryOpts)
@@ -303,7 +307,7 @@ describe('usePrefetchInfiniteQuery', () => {
   const Fallback = vi.fn().mockImplementation(() => <div>Loading...</div>)
 
   function Suspended<T = unknown>(props: {
-    queryOpts: UseInfiniteQueryOptions<
+    queryOpts: UseSuspenseInfiniteQueryOptions<
       T,
       Error,
       InfiniteData<T>,

packages/react-query/src/__tests__/suspense.test-d.tsx

@@ -1,7 +1,7 @@
 import { describe, expectTypeOf, it } from 'vitest'
+import { skipToken } from '@tanstack/query-core'
 import { useSuspenseQuery } from '../useSuspenseQuery'
 import { useSuspenseInfiniteQuery } from '../useSuspenseInfiniteQuery'
-import type { UseSuspenseQueryOptions } from '..'
 import type { InfiniteData } from '@tanstack/query-core'
 
 describe('useSuspenseQuery', () => {
@@ -23,6 +23,20 @@ describe('useSuspenseQuery', () => {
     expectTypeOf(status).toEqualTypeOf<'error' | 'success'>()
   })
 
+  it('should not allow skipToken in queryFn', () => {
+    useSuspenseQuery({
+      queryKey: ['key'],
+      // @ts-expect-error
+      queryFn: skipToken,
+    })
+
+    useSuspenseQuery({
+      queryKey: ['key'],
+      // @ts-expect-error
+      queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5),
+    })
+  })
+
   it('should not allow placeholderData, enabled or throwOnError props', () => {
     useSuspenseQuery({
       queryKey: ['key'],
@@ -70,6 +84,20 @@ describe('useSuspenseInfiniteQuery', () => {
     expectTypeOf(data).toEqualTypeOf<InfiniteData<number, unknown>>()
   })
 
+  it('should not allow skipToken in queryFn', () => {
+    useSuspenseInfiniteQuery({
+      queryKey: ['key'],
+      // @ts-expect-error
+      queryFn: skipToken,
+    })
+
+    useSuspenseInfiniteQuery({
+      queryKey: ['key'],
+      // @ts-expect-error
+      queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5),
+    })
+  })
+
   it('should not have pending status', () => {
     const { status } = useSuspenseInfiniteQuery({
       queryKey: ['key'],
@@ -122,14 +150,4 @@ describe('useSuspenseInfiniteQuery', () => {
     // @ts-expect-error TS2339
     query.isPlaceholderData
   })
-
-  it('should not accept skipToken type for queryFn in useSuspenseQuery', () => {
-    const query: UseSuspenseQueryOptions = {
-      // @ts-expect-error
-      queryFn: skipToken,
-      queryKey: [1],
-    }
-
-    return query
-  })
 })

packages/react-query/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>()
-  })
 })

packages/react-query/src/infiniteQueryOptions.ts

@@ -2,7 +2,9 @@ import type {
   DataTag,
   DefaultError,
   InfiniteData,
+  OmitKeyof,
   QueryKey,
+  SkipToken,
 } from '@tanstack/query-core'
 import type { UseInfiniteQueryOptions } from './types'
 
@@ -23,6 +25,36 @@ export type UndefinedInitialDataInfiniteOptions<
   initialData?: undefined
 }
 
+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<
@@ -68,6 +100,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,

packages/react-query/src/queryOptions.ts

@@ -2,7 +2,9 @@ import type {
   DataTag,
   DefaultError,
   InitialDataFunction,
+  OmitKeyof,
   QueryKey,
+  SkipToken,
 } from '@tanstack/query-core'
 import type { UseQueryOptions } from './types'
 
@@ -15,6 +17,21 @@ export type UndefinedInitialDataOptions<
   initialData?: undefined | InitialDataFunction<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<
@@ -39,6 +56,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,

packages/react-query/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,

packages/react-query/src/useSuspenseInfiniteQuery.ts

@@ -1,5 +1,5 @@
 'use client'
-import { InfiniteQueryObserver, skipToken } from '@tanstack/query-core'
+import { InfiniteQueryObserver } from '@tanstack/query-core'
 import { useBaseQuery } from './useBaseQuery'
 import { defaultThrowOnError } from './suspense'
 import type {
@@ -32,12 +32,6 @@ export function useSuspenseInfiniteQuery<
   >,
   queryClient?: QueryClient,
 ): UseSuspenseInfiniteQueryResult<TData, TError> {
-  if (process.env.NODE_ENV !== 'production') {
-    if (options.queryFn === skipToken) {
-      console.error('skipToken is not allowed for useSuspenseInfiniteQuery')
-    }
-  }
-
   return useBaseQuery(
     {
       ...options,

packages/react-query/src/useSuspenseQueries.ts

@@ -1,5 +1,4 @@
 'use client'
-import { skipToken } from '@tanstack/query-core'
 import { useQueries } from './useQueries'
 import { defaultThrowOnError } from './suspense'
 import type { UseSuspenseQueryOptions, UseSuspenseQueryResult } from './types'
@@ -192,12 +191,6 @@ export function useSuspenseQueries<
     {
       ...options,
       queries: options.queries.map((query) => {
-        if (process.env.NODE_ENV !== 'production') {
-          if (query.queryFn === skipToken) {
-            console.error('skipToken is not allowed for useSuspenseQueries')
-          }
-        }
-
         return {
           ...query,
           suspense: true,