@tanstack/react-query 4.36.1 → 4.39.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query",
-  "version": "4.36.1",
+  "version": "4.39.1",
   "description": "Hooks for managing, caching and syncing asynchronous and remote data in React",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "use-sync-external-store": "^1.2.0",
-    "@tanstack/query-core": "4.36.1"
+    "@tanstack/query-core": "4.39.1"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -66,12 +66,5 @@
       "optional": true
     }
   },
-  "scripts": {
-    "clean": "rimraf ./build",
-    "test:eslint": "eslint --ext .ts,.tsx ./src",
-    "test:types": "tsc",
-    "test:lib": "jest --config ./jest.config.ts",
-    "test:lib:dev": "pnpm run test:lib --watch",
-    "build:types": "tsc --build"
-  }
+  "scripts": {}
 }

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

@@ -0,0 +1,270 @@
+import { expectTypeOf } from 'expect-type'
+import {
+  QueryCache,
+  type UseQueryResult,
+  useQueries,
+  useQuery,
+  useQueryClient,
+} from '@tanstack/react-query'
+import { queryOptions } from '..'
+import { useSuspenseQueries, useSuspenseQuery } from '..'
+import { type UseSuspenseQueryResult } from '../useSuspenseQuery'
+import { doNotExecute } from './utils'
+import type { DefinedUseQueryResult } from '@tanstack/react-query'
+
+const queryKey = ['key'] as const
+const queryFn = () => Promise.resolve({ field: 'success' })
+
+describe('queryOptions', () => {
+  it('should be used with useQuery', () => {
+    doNotExecute(() => {
+      const dd = useQuery(
+        queryOptions({
+          queryKey,
+          queryFn,
+        }),
+      )
+      expectTypeOf(dd).toEqualTypeOf<UseQueryResult<{ field: string }>>()
+      expectTypeOf(
+        useQuery({
+          ...queryOptions({
+            queryKey,
+            queryFn,
+          }),
+          select: (data) => data.field,
+        }),
+      ).toEqualTypeOf<UseQueryResult<string>>()
+      expectTypeOf(
+        useQuery({
+          ...queryOptions({
+            queryKey,
+            queryFn,
+            select: (data) => data.field,
+          }),
+        }),
+      ).toEqualTypeOf<UseQueryResult<string>>()
+      expectTypeOf(
+        useQuery({
+          ...queryOptions({
+            queryKey,
+            queryFn,
+          }),
+          initialData: { field: 'success' },
+        }),
+      ).toEqualTypeOf<DefinedUseQueryResult<{ field: string }>>()
+      expectTypeOf(
+        useQuery({
+          ...queryOptions({
+            queryKey,
+            queryFn,
+          }),
+          initialData: { field: 'success' },
+          select: (data) => data.field,
+        }),
+      ).toEqualTypeOf<DefinedUseQueryResult<string>>()
+      expectTypeOf(
+        useQuery({
+          ...queryOptions({
+            queryKey,
+            queryFn,
+          }),
+          initialData: undefined,
+          select: (data) => data.field,
+        }),
+      ).toEqualTypeOf<UseQueryResult<string>>()
+      expectTypeOf(
+        useQuery({
+          ...queryOptions({
+            queryKey,
+            queryFn,
+          }),
+          initialData: () => undefined,
+          select: (data) => data.field,
+        }),
+      ).toEqualTypeOf<UseQueryResult<string>>()
+      expectTypeOf(
+        useQuery({
+          ...queryOptions({
+            queryKey,
+            queryFn,
+            select: (data) => data.field,
+          }),
+          refetchInterval: 1000,
+        }),
+      ).toEqualTypeOf<UseQueryResult<string>>()
+    })
+  })
+  it('should be used with useSuspenseQuery', () => {
+    doNotExecute(() => {
+      expectTypeOf(
+        useSuspenseQuery(
+          queryOptions({
+            queryKey,
+            queryFn,
+          }),
+        ),
+      ).toEqualTypeOf<UseSuspenseQueryResult<{ field: string }>>()
+
+      expectTypeOf(
+        useSuspenseQuery({
+          ...queryOptions({
+            queryKey,
+            queryFn,
+          }),
+          select: (data) => data.field,
+        }),
+      ).toEqualTypeOf<UseSuspenseQueryResult<string>>()
+      expectTypeOf(
+        useSuspenseQuery({
+          ...queryOptions({
+            queryKey,
+            queryFn,
+          }),
+          initialData: { field: 'success' },
+        }),
+      ).toEqualTypeOf<UseSuspenseQueryResult<{ field: string }>>()
+      expectTypeOf(
+        useSuspenseQuery({
+          ...queryOptions({
+            queryKey,
+            queryFn,
+          }),
+          initialData: undefined,
+          select: (data) => data.field,
+        }),
+      ).toEqualTypeOf<UseSuspenseQueryResult<string>>()
+      expectTypeOf(
+        useSuspenseQuery({
+          ...queryOptions({
+            queryKey,
+            queryFn,
+          }),
+          initialData: { field: 'success' },
+          select: (data) => data.field,
+        }),
+      ).toEqualTypeOf<UseSuspenseQueryResult<string>>()
+      expectTypeOf(
+        useSuspenseQuery({
+          ...queryOptions({
+            queryKey,
+            queryFn,
+            select: (data) => data.field,
+          }),
+          refetchInterval: 1000,
+        }),
+      ).toEqualTypeOf<UseSuspenseQueryResult<string>>()
+    })
+  })
+  it('should be used with useQueries', () => {
+    doNotExecute(() => {
+      const [query1, query2, query3, query4] = useQueries({
+        queries: [
+          queryOptions({
+            queryKey,
+            queryFn,
+          }),
+          queryOptions({
+            queryKey,
+            queryFn,
+            initialData: { field: 'success' },
+          }),
+          {
+            ...queryOptions({
+              queryKey,
+              queryFn,
+            }),
+            initialData: { field: 'success' },
+          },
+          {
+            ...queryOptions({
+              queryKey,
+              queryFn,
+            }),
+            initialData: undefined,
+          },
+        ],
+      })
+      expectTypeOf(query1).toEqualTypeOf<UseQueryResult<{ field: string }>>()
+      expectTypeOf(query2).toEqualTypeOf<
+        DefinedUseQueryResult<{ field: string }>
+      >()
+      expectTypeOf(query3).toEqualTypeOf<
+        DefinedUseQueryResult<{ field: string }>
+      >()
+      expectTypeOf(query4).toEqualTypeOf<UseQueryResult<{ field: string }>>()
+    })
+  })
+  it('should be used with useSuspenseQueries', () => {
+    doNotExecute(() => {
+      const [query1, query2, query3, query4, query5] = useSuspenseQueries({
+        queries: [
+          queryOptions({
+            queryKey,
+            queryFn,
+          }),
+          queryOptions({
+            queryKey,
+            queryFn,
+            initialData: { field: 'success' },
+          }),
+          {
+            ...queryOptions({
+              queryKey,
+              queryFn,
+            }),
+            initialData: { field: 'success' },
+          },
+          {
+            ...queryOptions({
+              queryKey,
+              queryFn,
+            }),
+            initialData: undefined,
+          },
+          {
+            ...queryOptions({
+              queryKey,
+              queryFn,
+              select: (data) => data.field,
+            }),
+          },
+        ],
+      })
+      expectTypeOf(query1).toEqualTypeOf<
+        UseSuspenseQueryResult<{ field: string }>
+      >()
+      expectTypeOf(query2).toEqualTypeOf<
+        UseSuspenseQueryResult<{ field: string }>
+      >()
+      expectTypeOf(query3).toEqualTypeOf<
+        UseSuspenseQueryResult<{ field: string }>
+      >()
+      expectTypeOf(query4).toEqualTypeOf<
+        UseSuspenseQueryResult<{ field: string }>
+      >()
+      expectTypeOf(query5).toEqualTypeOf<UseSuspenseQueryResult<string>>()
+    })
+  })
+  it('should be used with useQueryClient', () => {
+    doNotExecute(async () => {
+      const queryClient = useQueryClient()
+      queryClient.invalidateQueries(queryOptions({ queryKey, queryFn }))
+      queryClient.resetQueries(queryOptions({ queryKey, queryFn }))
+      queryClient.removeQueries(queryOptions({ queryKey, queryFn }))
+      queryClient.cancelQueries(queryOptions({ queryKey, queryFn }))
+      queryClient.prefetchQuery(queryOptions({ queryKey, queryFn }))
+      queryClient.refetchQueries(queryOptions({ queryKey, queryFn }))
+      expectTypeOf(
+        await queryClient.fetchQuery(queryOptions({ queryKey, queryFn })),
+      ).toEqualTypeOf<{ field: string }>()
+    })
+  })
+  it('should be used with queryCache', () => {
+    doNotExecute(() => {
+      const queryCache = new QueryCache()
+      queryCache.find({ queryKey: [] })
+      queryCache.find(queryOptions({ queryKey, queryFn }))
+      queryCache.find(queryKey)
+    })
+  })
+})

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

@@ -1,4 +1,5 @@
 import { useQuery } from '../useQuery'
+import { doNotExecute } from './utils'
 
 export type Equal<X, Y> = (<T>() => T extends X ? 1 : 2) extends <
   T,
@@ -8,8 +9,6 @@ export type Equal<X, Y> = (<T>() => T extends X ? 1 : 2) extends <
 
 export type Expect<T extends true> = T
 
-const doNotExecute = (_func: () => void) => true
-
 describe('initialData', () => {
   describe('Config object overload', () => {
     it('TData should always be defined when initialData is provided as an object', () => {

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

@@ -0,0 +1,102 @@
+import { expectTypeOf } from 'expect-type'
+import { queryOptions } from '..'
+import { useSuspenseQueries } from '..'
+import { doNotExecute } from './utils'
+import type { UseSuspenseQueryResult } from '../useSuspenseQuery'
+
+export const queryKey = ['key'] as const
+const sleep = (ms: number) =>
+  new Promise<undefined>((resolve) => setTimeout(() => resolve(undefined), ms))
+export const queryFn = () => sleep(10).then(() => ({ text: 'response' }))
+export const select = (data: Awaited<ReturnType<typeof queryFn>>) => data.text
+
+describe('useSuspenseQueries', () => {
+  it('type check', () => {
+    doNotExecute(() => {
+      useSuspenseQueries({
+        queries: [
+          {
+            queryKey: [...queryKey, 1] as const,
+            queryFn,
+            // @ts-expect-error no suspense
+            suspense: false,
+          },
+        ] as const,
+      })
+      useSuspenseQueries({
+        queries: [
+          {
+            queryKey: [...queryKey, 2] as const,
+            queryFn,
+            select,
+            // @ts-expect-error no suspense
+            suspense: true,
+          },
+        ] as const,
+      })
+      useSuspenseQueries({
+        queries: [
+          {
+            queryKey: [...queryKey, 3] as const,
+            queryFn,
+            // @ts-expect-error no enabled
+            enabled: true,
+          },
+        ] as const,
+      })
+      useSuspenseQueries({
+        queries: [
+          {
+            queryKey: [...queryKey, 4] as const,
+            queryFn,
+            // @ts-expect-error no enabled
+            enabled: true,
+            select,
+          },
+        ] as const,
+      })
+      useSuspenseQueries({
+        queries: [
+          {
+            queryKey: [...queryKey, 4] as const,
+            queryFn,
+            // @ts-expect-error no networkMode
+            networkMode: 'always',
+            select,
+          },
+        ] as const,
+      })
+      useSuspenseQueries({
+        queries: [
+          queryOptions({
+            queryKey: [...queryKey, 4] as const,
+            queryFn: () => Promise.resolve({ field: 'success' }),
+            select: (data) => data.field,
+          }),
+        ] as const,
+      })
+      // @ts-expect-error if no items
+      useSuspenseQueries({})
+      // @ts-expect-error if no items
+      useSuspenseQueries()
+
+      const [query1, query2, query3] = useSuspenseQueries({
+        queries: [
+          { queryKey: [...queryKey, 5] as const, queryFn },
+          { queryKey: [...queryKey, 6] as const, queryFn, select },
+          queryOptions({
+            queryKey: [...queryKey, 4] as const,
+            queryFn: () => Promise.resolve({ field: 'success' }),
+            select: (data) => data.field,
+          }),
+        ] as const,
+      })
+
+      expectTypeOf(query1).toEqualTypeOf<
+        UseSuspenseQueryResult<{ text: string }>
+      >()
+      expectTypeOf(query2).toEqualTypeOf<UseSuspenseQueryResult<string>>()
+      expectTypeOf(query3).toEqualTypeOf<UseSuspenseQueryResult<string>>()
+    })
+  })
+})

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

@@ -0,0 +1,81 @@
+import { expectTypeOf } from 'expect-type'
+import {
+  type UseSuspenseQueryResult,
+  useSuspenseQuery,
+} from '../useSuspenseQuery'
+import { queryOptions } from '..'
+import { doNotExecute } from './utils'
+
+const queryKey = ['key'] as const
+const sleep = (ms: number) =>
+  new Promise<undefined>((resolve) => setTimeout(() => resolve(undefined), ms))
+const queryFn = () => sleep(10).then(() => ({ text: 'response' }))
+
+describe('useSuspenseQuery', () => {
+  it('type check', () => {
+    doNotExecute(() => {
+      //@ts-expect-error no arg
+      useSuspenseQuery()
+      useSuspenseQuery({
+        queryKey,
+        queryFn,
+        //@ts-expect-error no suspense
+        suspense: boolean,
+      })
+      useSuspenseQuery({
+        queryKey,
+        queryFn,
+        //@ts-expect-error no useErrorBoundary
+        useErrorBoundary: boolean,
+      })
+      useSuspenseQuery({
+        queryKey,
+        queryFn,
+        //@ts-expect-error no enabled
+        enabled: boolean,
+      })
+      useSuspenseQuery({
+        queryKey,
+        queryFn,
+        //@ts-expect-error no placeholderData
+        placeholderData: 'placeholder',
+      })
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+      useSuspenseQuery({
+        queryKey,
+        queryFn,
+        //@ts-expect-error no isPlaceholderData
+      }).isPlaceholderData
+      useSuspenseQuery({
+        queryKey,
+        queryFn,
+        //@ts-expect-error no networkMode
+        networkMode: 'always',
+      })
+
+      expectTypeOf(useSuspenseQuery({ queryKey, queryFn })).toEqualTypeOf<
+        UseSuspenseQueryResult<{ text: string }>
+      >()
+      expectTypeOf(
+        useSuspenseQuery({
+          queryKey,
+          queryFn,
+          select: (data) => data.text,
+        }),
+      ).toEqualTypeOf<UseSuspenseQueryResult<string>>()
+      const options = queryOptions({
+        queryKey,
+        queryFn,
+      })
+      expectTypeOf(useSuspenseQuery(options)).toEqualTypeOf<
+        UseSuspenseQueryResult<{ text: string }>
+      >()
+      expectTypeOf(
+        useSuspenseQuery({
+          ...options,
+          select: (data) => data.text,
+        }),
+      ).toEqualTypeOf<UseSuspenseQueryResult<string>>()
+    })
+  })
+})

package/src/__tests__/utils.tsx

@@ -4,6 +4,8 @@ import * as utils from '@tanstack/query-core'
 import { QueryClient, QueryClientProvider } from '..'
 import type { ContextOptions, MutationOptions, QueryClientConfig } from '..'
 
+export const doNotExecute = (_func: () => void) => true
+
 export function renderWithClient(
   client: QueryClient,
   ui: React.ReactElement,

package/src/index.ts

@@ -11,6 +11,8 @@ export * from './types'
 export { useQueries } from './useQueries'
 export type { QueriesResults, QueriesOptions } from './useQueries'
 export { useQuery } from './useQuery'
+export { useSuspenseQuery } from './useSuspenseQuery'
+export { useSuspenseQueries } from './useSuspenseQueries'
 export {
   defaultContext,
   QueryClientProvider,
@@ -29,3 +31,4 @@ export { useIsMutating } from './useIsMutating'
 export { useMutation } from './useMutation'
 export { useInfiniteQuery } from './useInfiniteQuery'
 export { useIsRestoring, IsRestoringProvider } from './isRestoring'
+export { queryOptions } from './queryOptions'

package/src/queryOptions.ts

@@ -0,0 +1,86 @@
+import type {
+  InitialDataFunction,
+  NonUndefinedGuard,
+  OmitKeyof,
+  QueryKey,
+  WithRequired,
+} from '@tanstack/query-core'
+import type { UseQueryOptions } from './types'
+
+type UseQueryOptionsOmitted<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+> = OmitKeyof<
+  UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+  'onSuccess' | 'onError' | 'onSettled' | 'refetchInterval'
+>
+
+type ProhibitedQueryOptionsKeyInV5 = keyof Pick<
+  UseQueryOptionsOmitted,
+  'useErrorBoundary' | 'suspense' | 'getNextPageParam' | 'getPreviousPageParam'
+>
+
+export type UndefinedInitialDataOptions<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+> = UseQueryOptionsOmitted<TQueryFnData, TError, TData, TQueryKey> & {
+  initialData?:
+    | undefined
+    | InitialDataFunction<NonUndefinedGuard<TQueryFnData>>
+    | NonUndefinedGuard<TQueryFnData>
+}
+
+export type DefinedInitialDataOptions<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+> = UseQueryOptionsOmitted<TQueryFnData, TError, TData, TQueryKey> & {
+  initialData:
+    | NonUndefinedGuard<TQueryFnData>
+    | (() => NonUndefinedGuard<TQueryFnData>)
+}
+
+export function queryOptions<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  options: WithRequired<
+    OmitKeyof<
+      DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
+      ProhibitedQueryOptionsKeyInV5
+    >,
+    'queryKey'
+  >,
+): WithRequired<
+  DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
+  'queryKey'
+>
+
+export function queryOptions<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  options: WithRequired<
+    OmitKeyof<
+      UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
+      ProhibitedQueryOptionsKeyInV5
+    >,
+    'queryKey'
+  >,
+): WithRequired<
+  UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
+  'queryKey'
+>
+
+export function queryOptions(options: unknown) {
+  return options
+}