@tanstack/react-query 5.22.2 → 5.24.2

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

@@ -0,0 +1,140 @@
+import { describe, expectTypeOf, it } from 'vitest'
+import { useQuery } from '../useQuery'
+import { queryOptions } from '../queryOptions'
+import type { UseQueryOptions } from '../types'
+
+describe('initialData', () => {
+  describe('Config object overload', () => {
+    it('TData should always be defined when initialData is provided as an object', () => {
+      const { data } = useQuery({
+        queryKey: ['key'],
+        queryFn: () => ({ wow: true }),
+        initialData: { wow: true },
+      })
+
+      expectTypeOf(data).toEqualTypeOf<{ wow: boolean }>()
+    })
+
+    it('TData should be defined when passed through queryOptions', () => {
+      const options = queryOptions({
+        queryKey: ['key'],
+        queryFn: () => {
+          return {
+            wow: true,
+          }
+        },
+        initialData: {
+          wow: true,
+        },
+      })
+      const { data } = useQuery(options)
+
+      expectTypeOf(data).toEqualTypeOf<{ wow: boolean }>()
+    })
+
+    it('it should be possible to define a different TData than TQueryFnData using select with queryOptions spread into useQuery', () => {
+      const options = queryOptions({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(1),
+      })
+
+      const query = useQuery({
+        ...options,
+        select: (data) => data > 1,
+      })
+
+      expectTypeOf(query.data).toEqualTypeOf<boolean | undefined>()
+    })
+
+    it('TData should always be defined when initialData is provided as a function which ALWAYS returns the data', () => {
+      const { data } = useQuery({
+        queryKey: ['key'],
+        queryFn: () => {
+          return {
+            wow: true,
+          }
+        },
+        initialData: () => ({
+          wow: true,
+        }),
+      })
+
+      expectTypeOf(data).toEqualTypeOf<{ wow: boolean }>()
+    })
+
+    it('TData should have undefined in the union when initialData is NOT provided', () => {
+      const { data } = useQuery({
+        queryKey: ['key'],
+        queryFn: () => {
+          return {
+            wow: true,
+          }
+        },
+      })
+
+      expectTypeOf(data).toEqualTypeOf<{ wow: boolean } | undefined>()
+    })
+
+    it('TData should have undefined in the union when initialData is provided as a function which can return undefined', () => {
+      const { data } = useQuery({
+        queryKey: ['key'],
+        queryFn: () => {
+          return {
+            wow: true,
+          }
+        },
+        initialData: () => undefined as { wow: boolean } | undefined,
+      })
+
+      expectTypeOf(data).toEqualTypeOf<{ wow: boolean } | undefined>()
+    })
+
+    it('TData should be narrowed after an isSuccess check when initialData is provided as a function which can return undefined', () => {
+      const { data, isSuccess } = useQuery({
+        queryKey: ['key'],
+        queryFn: () => {
+          return {
+            wow: true,
+          }
+        },
+        initialData: () => undefined as { wow: boolean } | undefined,
+      })
+
+      if (isSuccess) {
+        expectTypeOf(data).toEqualTypeOf<{ wow: boolean }>()
+      }
+    })
+  })
+
+  describe('custom hook', () => {
+    it('should allow custom hooks using UseQueryOptions', () => {
+      type Data = string
+
+      const useCustomQuery = (
+        options?: Omit<UseQueryOptions<Data>, 'queryKey' | 'queryFn'>,
+      ) => {
+        return useQuery({
+          ...options,
+          queryKey: ['todos-key'],
+          queryFn: () => Promise.resolve('data'),
+        })
+      }
+
+      const { data } = useCustomQuery()
+
+      expectTypeOf(data).toEqualTypeOf<Data | undefined>()
+    })
+  })
+
+  describe('structuralSharing', () => {
+    it('should restrict to same types', () => {
+      useQuery({
+        queryKey: ['key'],
+        queryFn: () => 5,
+        structuralSharing: (_oldData, newData) => {
+          return newData
+        },
+      })
+    })
+  })
+})

package/src/__tests__/utils.tsx

@@ -78,14 +78,6 @@ export function setActTimeout(fn: () => void, ms?: number) {
   }, ms)
 }
 
-export type Equal<TTargetA, TTargetB> = (<T>() => T extends TTargetA
-  ? 1
-  : 2) extends <T>() => T extends TTargetB ? 1 : 2
-  ? true
-  : false
-
-export type Expect<T extends true> = T
-
 /**
  * Assert the parameter is not typed as `any`
  */

package/src/suspense.ts

@@ -16,7 +16,7 @@ export const defaultThrowOnError = <
 >(
   _error: TError,
   query: Query<TQueryFnData, TError, TData, TQueryKey>,
-) => typeof query.state.data === 'undefined'
+) => query.state.data === undefined
 
 export const ensureStaleTime = (
   defaultedOptions: DefaultedQueryObserverOptions<any, any, any, any, any>,

package/src/useMutation.ts

@@ -2,7 +2,7 @@
 import * as React from 'react'
 import { MutationObserver, notifyManager } from '@tanstack/query-core'
 import { useQueryClient } from './QueryClientProvider'
-import { shouldThrowError } from './utils'
+import { noop, shouldThrowError } from './utils'
 import type {
   UseMutateFunction,
   UseMutationOptions,
@@ -63,5 +63,3 @@ export function useMutation<
 
   return { ...result, mutate, mutateAsync: result.mutate }
 }
-
-function noop() {}

package/src/useSuspenseQueries.ts

@@ -187,6 +187,7 @@ export function useSuspenseQueries<
         suspense: true,
         throwOnError: defaultThrowOnError,
         enabled: true,
+        placeholderData: undefined,
       })),
     } as any,
     queryClient,

package/src/useSuspenseQuery.ts

@@ -20,6 +20,7 @@ export function useSuspenseQuery<
       enabled: true,
       suspense: true,
       throwOnError: defaultThrowOnError,
+      placeholderData: undefined,
     },
     QueryObserver,
     queryClient,

package/src/utils.ts

@@ -9,3 +9,5 @@ export function shouldThrowError<T extends (...args: Array<any>) => boolean>(
 
   return !!throwError
 }
+
+export function noop() {}

package/src/__tests__/infiniteQueryOptions.types.test.tsx

@@ -1,177 +0,0 @@
-import { describe, it } from 'vitest'
-import { QueryClient } from '@tanstack/query-core'
-import { infiniteQueryOptions } from '../infiniteQueryOptions'
-import { useInfiniteQuery } from '../useInfiniteQuery'
-import { useSuspenseInfiniteQuery } from '../useSuspenseInfiniteQuery'
-import { doNotExecute } from './utils'
-import type { InfiniteData, dataTagSymbol } from '@tanstack/query-core'
-import type { Equal, Expect } from './utils'
-
-describe('queryOptions', () => {
-  it('should not allow excess properties', () => {
-    doNotExecute(() => {
-      return infiniteQueryOptions({
-        queryKey: ['key'],
-        queryFn: () => Promise.resolve('data'),
-        getNextPageParam: () => 1,
-        initialPageParam: 1,
-        // @ts-expect-error this is a good error, because stallTime does not exist!
-        stallTime: 1000,
-      })
-    })
-  })
-  it('should infer types for callbacks', () => {
-    doNotExecute(() => {
-      return infiniteQueryOptions({
-        queryKey: ['key'],
-        queryFn: () => Promise.resolve('data'),
-        staleTime: 1000,
-        getNextPageParam: () => 1,
-        initialPageParam: 1,
-        select: (data) => {
-          const result: Expect<
-            Equal<InfiniteData<string, number>, typeof data>
-          > = true
-          return result
-        },
-      })
-    })
-  })
-  it('should work when passed to useInfiniteQuery', () => {
-    doNotExecute(() => {
-      const options = infiniteQueryOptions({
-        queryKey: ['key'],
-        queryFn: () => Promise.resolve('string'),
-        getNextPageParam: () => 1,
-        initialPageParam: 1,
-      })
-
-      const { data } = useInfiniteQuery(options)
-
-      // known issue: type of pageParams is unknown when returned from useInfiniteQuery
-      const result: Expect<
-        Equal<typeof data, InfiniteData<string, unknown> | undefined>
-      > = true
-      return result
-    })
-  })
-  it('should work when passed to useSuspenseInfiniteQuery', () => {
-    doNotExecute(() => {
-      const options = infiniteQueryOptions({
-        queryKey: ['key'],
-        queryFn: () => Promise.resolve('string'),
-        getNextPageParam: () => 1,
-        initialPageParam: 1,
-      })
-
-      const { data } = useSuspenseInfiniteQuery(options)
-
-      const result: Expect<Equal<typeof data, InfiniteData<string, unknown>>> =
-        true
-      return result
-    })
-  })
-  it('should work when passed to fetchInfiniteQuery', () => {
-    doNotExecute(async () => {
-      const options = infiniteQueryOptions({
-        queryKey: ['key'],
-        queryFn: () => Promise.resolve('string'),
-        getNextPageParam: () => 1,
-        initialPageParam: 1,
-      })
-
-      const data = await new QueryClient().fetchInfiniteQuery(options)
-
-      const result: Expect<Equal<typeof data, InfiniteData<string, number>>> =
-        true
-      return result
-    })
-  })
-  it('should tag the queryKey with the result type of the QueryFn', () => {
-    doNotExecute(() => {
-      const { queryKey } = infiniteQueryOptions({
-        queryKey: ['key'],
-        queryFn: () => Promise.resolve('string'),
-        getNextPageParam: () => 1,
-        initialPageParam: 1,
-      })
-
-      const result: Expect<
-        Equal<(typeof queryKey)[typeof dataTagSymbol], InfiniteData<string>>
-      > = true
-      return result
-    })
-  })
-  it('should tag the queryKey even if no promise is returned', () => {
-    doNotExecute(() => {
-      const { queryKey } = infiniteQueryOptions({
-        queryKey: ['key'],
-        queryFn: () => 'string',
-        getNextPageParam: () => 1,
-        initialPageParam: 1,
-      })
-
-      const result: Expect<
-        Equal<(typeof queryKey)[typeof dataTagSymbol], InfiniteData<string>>
-      > = true
-      return result
-    })
-  })
-  it('should tag the queryKey with the result type of the QueryFn if select is used', () => {
-    doNotExecute(() => {
-      const { queryKey } = infiniteQueryOptions({
-        queryKey: ['key'],
-        queryFn: () => Promise.resolve('string'),
-        select: (data) => data.pages,
-        getNextPageParam: () => 1,
-        initialPageParam: 1,
-      })
-
-      const result: Expect<
-        Equal<(typeof queryKey)[typeof dataTagSymbol], InfiniteData<string>>
-      > = true
-      return result
-    })
-  })
-  it('should return the proper type when passed to getQueryData', () => {
-    doNotExecute(() => {
-      const { queryKey } = infiniteQueryOptions({
-        queryKey: ['key'],
-        queryFn: () => Promise.resolve('string'),
-        getNextPageParam: () => 1,
-        initialPageParam: 1,
-      })
-
-      const queryClient = new QueryClient()
-      const data = queryClient.getQueryData(queryKey)
-
-      const result: Expect<
-        Equal<typeof data, InfiniteData<string, unknown> | undefined>
-      > = true
-      return result
-    })
-  })
-  it('should properly type when passed to setQueryData', () => {
-    doNotExecute(() => {
-      const { queryKey } = infiniteQueryOptions({
-        queryKey: ['key'],
-        queryFn: () => Promise.resolve('string'),
-        getNextPageParam: () => 1,
-        initialPageParam: 1,
-      })
-
-      const queryClient = new QueryClient()
-      const data = queryClient.setQueryData(queryKey, (prev) => {
-        const result: Expect<
-          Equal<typeof prev, InfiniteData<string, unknown> | undefined>
-        > = true
-        return result ? prev : { pages: ['foo'], pageParams: [1] }
-      })
-
-      const result: Expect<
-        Equal<typeof data, InfiniteData<string, unknown> | undefined>
-      > = true
-      return result
-    })
-  })
-})

package/src/__tests__/queryOptions.types.test.tsx

@@ -1,192 +0,0 @@
-import { describe, it } from 'vitest'
-import { QueryClient } from '@tanstack/query-core'
-import { queryOptions } from '../queryOptions'
-import { useQuery } from '../useQuery'
-import { useQueries } from '../useQueries'
-import { useSuspenseQuery } from '../useSuspenseQuery'
-import { doNotExecute } from './utils'
-import type { dataTagSymbol } from '@tanstack/query-core'
-import type { Equal, Expect } from './utils'
-
-describe('queryOptions', () => {
-  it('should not allow excess properties', () => {
-    doNotExecute(() => {
-      return queryOptions({
-        queryKey: ['key'],
-        queryFn: () => Promise.resolve(5),
-        // @ts-expect-error this is a good error, because stallTime does not exist!
-        stallTime: 1000,
-      })
-    })
-  })
-  it('should infer types for callbacks', () => {
-    doNotExecute(() => {
-      return queryOptions({
-        queryKey: ['key'],
-        queryFn: () => Promise.resolve(5),
-        staleTime: 1000,
-        select: (data) => {
-          const result: Expect<Equal<number, typeof data>> = true
-          return result
-        },
-      })
-    })
-  })
-  it('should work when passed to useQuery', () => {
-    doNotExecute(() => {
-      const options = queryOptions({
-        queryKey: ['key'],
-        queryFn: () => Promise.resolve(5),
-      })
-
-      const { data } = useQuery(options)
-
-      const result: Expect<Equal<typeof data, number | undefined>> = true
-      return result
-    })
-  })
-  it('should work when passed to useSuspenseQuery', () => {
-    doNotExecute(() => {
-      const options = queryOptions({
-        queryKey: ['key'],
-        queryFn: () => Promise.resolve(5),
-      })
-
-      const { data } = useSuspenseQuery(options)
-
-      const result: Expect<Equal<typeof data, number>> = true
-      return result
-    })
-  })
-  it('should work when passed to fetchQuery', () => {
-    doNotExecute(async () => {
-      const options = queryOptions({
-        queryKey: ['key'],
-        queryFn: () => Promise.resolve(5),
-      })
-
-      const data = await new QueryClient().fetchQuery(options)
-
-      const result: Expect<Equal<typeof data, number>> = true
-      return result
-    })
-  })
-  it('should work when passed to useQueries', () => {
-    doNotExecute(() => {
-      const options = queryOptions({
-        queryKey: ['key'],
-        queryFn: () => Promise.resolve(5),
-      })
-
-      const [{ data }] = useQueries({
-        queries: [options],
-      })
-
-      const result: Expect<Equal<typeof data, number | undefined>> = true
-      return result
-    })
-  })
-  it('should tag the queryKey with the result type of the QueryFn', () => {
-    doNotExecute(() => {
-      const { queryKey } = queryOptions({
-        queryKey: ['key'],
-        queryFn: () => Promise.resolve(5),
-      })
-
-      const result: Expect<
-        Equal<(typeof queryKey)[typeof dataTagSymbol], number>
-      > = true
-      return result
-    })
-  })
-  it('should tag the queryKey even if no promise is returned', () => {
-    doNotExecute(() => {
-      const { queryKey } = queryOptions({
-        queryKey: ['key'],
-        queryFn: () => 5,
-      })
-
-      const result: Expect<
-        Equal<(typeof queryKey)[typeof dataTagSymbol], number>
-      > = true
-      return result
-    })
-  })
-  it('should tag the queryKey with unknown if there is no queryFn', () => {
-    doNotExecute(() => {
-      const { queryKey } = queryOptions({
-        queryKey: ['key'],
-      })
-
-      const result: Expect<
-        Equal<(typeof queryKey)[typeof dataTagSymbol], unknown>
-      > = true
-      return result
-    })
-  })
-  it('should tag the queryKey with the result type of the QueryFn if select is used', () => {
-    doNotExecute(() => {
-      const { queryKey } = queryOptions({
-        queryKey: ['key'],
-        queryFn: () => Promise.resolve(5),
-        select: (data) => data.toString(),
-      })
-
-      const result: Expect<
-        Equal<(typeof queryKey)[typeof dataTagSymbol], number>
-      > = true
-      return result
-    })
-  })
-  it('should return the proper type when passed to getQueryData', () => {
-    doNotExecute(() => {
-      const { queryKey } = queryOptions({
-        queryKey: ['key'],
-        queryFn: () => Promise.resolve(5),
-      })
-
-      const queryClient = new QueryClient()
-      const data = queryClient.getQueryData(queryKey)
-
-      const result: Expect<Equal<typeof data, number | undefined>> = true
-      return result
-    })
-  })
-  it('should properly type updaterFn when passed to setQueryData', () => {
-    doNotExecute(() => {
-      const { queryKey } = queryOptions({
-        queryKey: ['key'],
-        queryFn: () => Promise.resolve(5),
-      })
-
-      const queryClient = new QueryClient()
-      const data = queryClient.setQueryData(queryKey, (prev) => {
-        const result: Expect<Equal<typeof prev, number | undefined>> = true
-        return result ? prev : 1
-      })
-
-      const result: Expect<Equal<typeof data, number | undefined>> = true
-      return result
-    })
-  })
-  it('should properly type value when passed to setQueryData', () => {
-    doNotExecute(() => {
-      const { queryKey } = queryOptions({
-        queryKey: ['key'],
-        queryFn: () => Promise.resolve(5),
-      })
-
-      const queryClient = new QueryClient()
-
-      // @ts-expect-error value should be a number
-      queryClient.setQueryData(queryKey, '5')
-      // @ts-expect-error value should be a number
-      queryClient.setQueryData(queryKey, () => '5')
-
-      const data = queryClient.setQueryData(queryKey, 5)
-
-      const result: Expect<Equal<typeof data, number | undefined>> = true
-      return result
-    })
-  })
-})