fix(types): useSuspenseQuery can be in error state (#6129)

because we don't throw background errors to boundaries; still, it will always have data defined

Author: TkDodo

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

@@ -0,0 +1,146 @@
+import { useSuspenseQuery } from '../useSuspenseQuery'
+import { useSuspenseInfiniteQuery } from '../useSuspenseInfiniteQuery'
+import { doNotExecute } from './utils'
+import type { InfiniteData } from '@tanstack/query-core'
+import type { Equal, Expect } from './utils'
+
+describe('useSuspenseQuery', () => {
+  it('should always have data defined', () => {
+    doNotExecute(() => {
+      const { data } = useSuspenseQuery({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+      })
+
+      const result: Expect<Equal<typeof data, number>> = true
+      return result
+    })
+  })
+
+  it('should not have pending status', () => {
+    doNotExecute(() => {
+      const { status } = useSuspenseQuery({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+      })
+
+      const result: Expect<Equal<typeof status, 'error' | 'success'>> = true
+      return result
+    })
+  })
+
+  it('should not allow placeholderData, enabled or throwOnError props', () => {
+    doNotExecute(() => {
+      useSuspenseQuery({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+        // @ts-expect-error TS2345
+        placeholderData: 5,
+        enabled: true,
+      })
+
+      useSuspenseQuery({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+        // @ts-expect-error TS2345
+        enabled: true,
+      })
+
+      useSuspenseQuery({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+        // @ts-expect-error TS2345
+        throwOnError: true,
+      })
+    })
+  })
+
+  it('should not return isPlaceholderData', () => {
+    doNotExecute(() => {
+      const query = useSuspenseQuery({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+      })
+
+      // @ts-expect-error TS2339
+      void query.isPlaceholderData
+    })
+  })
+})
+
+describe('useSuspenseInfiniteQuery', () => {
+  it('should always have data defined', () => {
+    doNotExecute(() => {
+      const { data } = useSuspenseInfiniteQuery({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+        initialPageParam: 1,
+        getNextPageParam: () => 1,
+      })
+
+      const result: Expect<Equal<typeof data, InfiniteData<number, unknown>>> =
+        true
+      return result
+    })
+  })
+
+  it('should not have pending status', () => {
+    doNotExecute(() => {
+      const { status } = useSuspenseInfiniteQuery({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+        initialPageParam: 1,
+        getNextPageParam: () => 1,
+      })
+
+      const result: Expect<Equal<typeof status, 'error' | 'success'>> = true
+      return result
+    })
+  })
+
+  it('should not allow placeholderData, enabled or throwOnError props', () => {
+    doNotExecute(() => {
+      useSuspenseInfiniteQuery({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+        initialPageParam: 1,
+        getNextPageParam: () => 1,
+        // @ts-expect-error TS2345
+        placeholderData: 5,
+        enabled: true,
+      })
+
+      useSuspenseInfiniteQuery({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+        initialPageParam: 1,
+        getNextPageParam: () => 1,
+        // @ts-expect-error TS2345
+        enabled: true,
+      })
+
+      useSuspenseInfiniteQuery({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+        initialPageParam: 1,
+        getNextPageParam: () => 1,
+        // @ts-expect-error TS2345
+        throwOnError: true,
+      })
+    })
+  })
+
+  it('should not return isPlaceholderData', () => {
+    doNotExecute(() => {
+      const query = useSuspenseInfiniteQuery({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+        initialPageParam: 1,
+        getNextPageParam: () => 1,
+      })
+
+      // @ts-expect-error TS2339
+      void query.isPlaceholderData
+    })
+  })
+})

packages/react-query/src/types.ts

@@ -6,14 +6,12 @@ import type {
   DefinedQueryObserverResult,
   InfiniteQueryObserverOptions,
   InfiniteQueryObserverResult,
-  InfiniteQueryObserverSuccessResult,
   MutateFunction,
   MutationObserverOptions,
   MutationObserverResult,
   QueryKey,
   QueryObserverOptions,
   QueryObserverResult,
-  QueryObserverSuccessResult,
   WithRequired,
 } from '@tanstack/query-core'
 
@@ -105,7 +103,7 @@ export type UseQueryResult<
 export type UseSuspenseQueryResult<
   TData = unknown,
   TError = DefaultError,
-> = Omit<QueryObserverSuccessResult<TData, TError>, 'isPlaceholderData'>
+> = Omit<DefinedQueryObserverResult<TData, TError>, 'isPlaceholderData'>
 
 export type DefinedUseQueryResult<
   TData = unknown,
@@ -125,7 +123,7 @@ export type DefinedUseInfiniteQueryResult<
 export type UseSuspenseInfiniteQueryResult<
   TData = unknown,
   TError = DefaultError,
-> = Omit<InfiniteQueryObserverSuccessResult<TData, TError>, 'isPlaceholderData'>
+> = Omit<DefinedInfiniteQueryObserverResult<TData, TError>, 'isPlaceholderData'>
 
 export interface UseMutationOptions<
   TData = unknown,