fix(react-query): update peerDependency, @tanstack/react-query to version 4.40.0 and deprecate old options

.changeset/healthy-apricots-chew.md

@@ -0,0 +1,7 @@
+---
+"@suspensive/react-query-4": minor
+"@suspensive/react-query-5": minor
+"@suspensive/react-query": minor
+---
+
+chore: update react-query dependencies to version 4.40.0 and deprecate old options

docs/suspensive.org/src/components/BubbleChart.tsx

@@ -1,11 +1,12 @@
 'use client'
 
 import { ErrorBoundary, Suspense } from '@suspensive/react'
-import { SuspenseQuery, queryOptions } from '@suspensive/react-query-4'
+import { SuspenseQuery } from '@suspensive/react-query-4'
 import {
   QueryClient,
   QueryClientProvider,
   QueryErrorResetBoundary,
+  queryOptions,
 } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import * as d3 from 'd3'

packages/react-query-4/src/PrefetchQuery.test-d.tsx

@@ -1,7 +1,7 @@
+import { queryOptions } from '@tanstack/react-query'
 import type { ReactNode } from 'react'
 import { describe, expectTypeOf, it } from 'vitest'
 import { PrefetchQuery } from './PrefetchQuery'
-import { queryOptions } from './queryOptions'
 import { queryFn, queryKey } from './test-utils'
 
 describe('<PrefetchQuery/>', () => {
@@ -11,7 +11,7 @@
         queryKey={queryKey}
         queryFn={queryFn}
         //@ts-expect-error no suspense
         suspense={boolean}
       />
     ))()
     ;(() => (
@@ -19,7 +19,7 @@
         queryKey={queryKey}
         queryFn={queryFn}
         //@ts-expect-error no useErrorBoundary
         useErrorBoundary={boolean}
       />
     ))()
     ;(() => (
@@ -27,7 +27,7 @@
         queryKey={queryKey}
         queryFn={queryFn}
         //@ts-expect-error no enabled
         enabled={boolean}
       />
     ))()
     ;(() => (

packages/react-query-4/src/SuspenseQueries.test-d.tsx

@@ -1,9 +1,8 @@
+import { type UseSuspenseQueryResult, queryOptions } from '@tanstack/react-query'
 import type { ReactNode } from 'react'
 import { describe, expectTypeOf, it } from 'vitest'
-import { queryOptions } from './queryOptions'
 import { SuspenseQueries } from './SuspenseQueries'
 import { queryFn, queryKey } from './test-utils'
-import type { UseSuspenseQueryResult } from './useSuspenseQuery'
 
 describe('<SuspenseQueries/>', () => {
   it('type check', () => {
@@ -27,7 +26,6 @@ describe('<SuspenseQueries/>', () => {
       <SuspenseQueries queries={[{ queryKey, queryFn }, queryOptions({ queryKey, queryFn })]}>
         {([
           query1,
-
           query2,
           // @ts-expect-error Tuple type '[UseSuspenseQueryResult<{ text: string; }, unknown>]' of length '1' has no element at index '2'.
           query3,

packages/react-query-4/src/SuspenseQueries.tsx

@@ -1,5 +1,5 @@
+import { type SuspenseQueriesOptions, type SuspenseQueriesResults, useSuspenseQueries } from '@tanstack/react-query'
 import type { ReactNode } from 'react'
-import { type SuspenseQueriesOptions, type SuspenseQueriesResults, useSuspenseQueries } from './useSuspenseQueries'
 
 /**
  * We provide these components to clearly express what causes suspense at the same depth.

packages/react-query-4/src/SuspenseQuery.test-d.tsx

@@ -1,9 +1,8 @@
+import { type UseSuspenseQueryResult, queryOptions } from '@tanstack/react-query'
 import type { ReactNode } from 'react'
 import { describe, expectTypeOf, it } from 'vitest'
-import { queryOptions } from './queryOptions'
 import { SuspenseQuery } from './SuspenseQuery'
 import { queryFn, queryKey } from './test-utils'
-import type { UseSuspenseQueryResult } from './useSuspenseQuery'
 
 describe('<SuspenseQuery/>', () => {
   it('type check', () => {
@@ -72,7 +71,7 @@ describe('<SuspenseQuery/>', () => {
         {(query) => {
           expectTypeOf(query).toEqualTypeOf<UseSuspenseQueryResult<{ text: string }>>()
           expectTypeOf(query.data).toEqualTypeOf<{ text: string }>()
-          expectTypeOf(query.status).toEqualTypeOf<'success'>()
+          expectTypeOf(query.status).toEqualTypeOf<'success' | 'error'>()
           return <></>
         }}
       </SuspenseQuery>
@@ -82,7 +81,7 @@ describe('<SuspenseQuery/>', () => {
         {(selectedQuery) => {
           expectTypeOf(selectedQuery).toEqualTypeOf<UseSuspenseQueryResult<string>>()
           expectTypeOf(selectedQuery.data).toEqualTypeOf<string>()
-          expectTypeOf(selectedQuery.status).toEqualTypeOf<'success'>()
+          expectTypeOf(selectedQuery.status).toEqualTypeOf<'error' | 'success'>()
           return <></>
         }}
       </SuspenseQuery>
@@ -98,7 +97,7 @@ describe('<SuspenseQuery/>', () => {
         {(query) => {
           expectTypeOf(query).toEqualTypeOf<UseSuspenseQueryResult<{ text: string }>>()
           expectTypeOf(query.data).toEqualTypeOf<{ text: string }>()
-          expectTypeOf(query.status).toEqualTypeOf<'success'>()
+          expectTypeOf(query.status).toEqualTypeOf<'error' | 'success'>()
           return <></>
         }}
       </SuspenseQuery>
@@ -108,7 +107,7 @@ describe('<SuspenseQuery/>', () => {
         {(selectedQuery) => {
           expectTypeOf(selectedQuery).toEqualTypeOf<UseSuspenseQueryResult<string>>()
           expectTypeOf(selectedQuery.data).toEqualTypeOf<string>()
-          expectTypeOf(selectedQuery.status).toEqualTypeOf<'success'>()
+          expectTypeOf(selectedQuery.status).toEqualTypeOf<'error' | 'success'>()
           return <></>
         }}
       </SuspenseQuery>

packages/react-query-4/src/SuspenseQuery.tsx

@@ -1,6 +1,10 @@
-import type { QueryKey } from '@tanstack/react-query'
+import {
+  type QueryKey,
+  type UseSuspenseQueryOptions,
+  type UseSuspenseQueryResult,
+  useSuspenseQuery,
+} from '@tanstack/react-query'
 import type { ReactNode } from 'react'
-import { type UseSuspenseQueryOptions, type UseSuspenseQueryResult, useSuspenseQuery } from './useSuspenseQuery'
 
 /**
  * We provide these components to clearly express what causes suspense at the same depth.

packages/react-query-4/src/infiniteQueryOptions.ts

@@ -1,6 +1,9 @@
 import type { InfiniteData, QueryKey, UseInfiniteQueryOptions } from '@tanstack/react-query'
 import type { OmitKeyof, RequiredKeyof } from './utility-types'
 
+/**
+ * @deprecated There is no `SelectedInfiniteOptions` in \@tanstack/react-query@^4.40.0.
+ */
 export type SelectedInfiniteOptions<
   TQueryFnData,
   TError = unknown,
@@ -27,6 +30,9 @@ export type SelectedInfiniteOptions<
   select: (data: InfiniteData<TQueryFnData>) => InfiniteData<TData>
 }
 
+/**
+ * @deprecated There is no `UnSelectedInfiniteOptions` in \@tanstack/react-query@^4.40.0.
+ */
 export type UnSelectedInfiniteOptions<
   TQueryFnData,
   TError = unknown,

packages/react-query-4/src/queryOptions.test-d.tsx

@@ -1,11 +1,17 @@
-import { type UseQueryResult, useQueries, useQuery, useQueryClient } from '@tanstack/react-query'
+import {
+  type UseQueryResult,
+  type UseSuspenseQueryResult,
+  queryOptions,
+  useQueries,
+  useQuery,
+  useQueryClient,
+  useSuspenseQueries,
+  useSuspenseQuery,
+} from '@tanstack/react-query'
 import { describe, expectTypeOf, it } from 'vitest'
-import { queryOptions } from './queryOptions'
 import { SuspenseQuery } from './SuspenseQuery'
 import { queryKey } from './test-utils'
 import { usePrefetchQuery } from './usePrefetchQuery'
-import { useSuspenseQueries } from './useSuspenseQueries'
-import { type UseSuspenseQueryResult, useSuspenseQuery } from './useSuspenseQuery'
 
 const query = {
   options1: () =>
@@ -58,26 +64,30 @@ describe('queryOptions', () => {
     ))()
   })
   it('should be used with useQueries', () => {
-    const [query1, query2, query3] = useQueries({
+    const [
+      query1,
+      query2,
+      // query3
+    ] = useQueries({
       queries: [
         query.options1(),
         { ...query.options2() },
-        queryOptions({
-          queryKey: [...queryKey, 4] as const,
-          queryFn: () => Promise.resolve({ field: 'success' }),
-          select: (data) => {
-            expectTypeOf(data).toEqualTypeOf<{ field: string }>()
-            return data.field
-          },
-        }),
+        // queryOptions({
+        //   queryKey: [...queryKey, 4] as const,
+        //   queryFn: () => Promise.resolve({ field: 'success' }),
+        //   select: (data) => {
+        //     expectTypeOf(data).toEqualTypeOf<{ field: string }>()
+        //     return data.field
+        //   },
+        // }),
       ],
     })
     expectTypeOf(query1).toEqualTypeOf<UseQueryResult<{ field: string }>>()
     expectTypeOf(query1.data).toEqualTypeOf<{ field: string } | undefined>()
     expectTypeOf(query2).toEqualTypeOf<UseQueryResult<{ field: string }>>()
     expectTypeOf(query2.data).toEqualTypeOf<{ field: string } | undefined>()
-    expectTypeOf(query3).toEqualTypeOf<UseQueryResult<string>>()
-    expectTypeOf(query3.data).toEqualTypeOf<string | undefined>()
+    // expectTypeOf(query3).toEqualTypeOf<UseQueryResult<string>>()
+    // expectTypeOf(query3.data).toEqualTypeOf<string | undefined>()
   })
   it('should be used with useSuspenseQueries', () => {
     const [query1, query2, query3] = useSuspenseQueries({

packages/react-query-4/src/queryOptions.ts

@@ -1,6 +1,9 @@
-import type { QueryKey, UseQueryOptions } from '@tanstack/react-query'
+import { type QueryKey, type UseQueryOptions, queryOptions as original_queryOptions } from '@tanstack/react-query'
 import type { OmitKeyof, RequiredKeyof } from './utility-types'
 
+/**
+ * @deprecated There is no `SelectedQueryOptions` in \@tanstack/react-query@^4.40.0.
+ */
 export type SelectedQueryOptions<
   TQueryFnData = unknown,
   TError = unknown,
@@ -29,6 +32,9 @@ export type SelectedQueryOptions<
   select: (data: TQueryFnData) => TData
 }
 
+/**
+ * @deprecated There is no `UnSelectedQueryOptions` in \@tanstack/react-query@^4.40.0.
+ */
 export type UnSelectedQueryOptions<
   TQueryFnData = unknown,
   TError = unknown,
@@ -58,29 +64,12 @@ export type UnSelectedQueryOptions<
 }
 
 /**
- * Creates a reusable query options object that can be used across different query hooks.
- * Provides better type inference and easier query key management.
- *
- * @see {@link https://suspensive.org/docs/react-query/queryOptions Suspensive Docs}
+ * This feature is officially supported in \@tanstack/react-query@^4.40.0, You can proceed with the migration.
+ * @deprecated Use `queryOptions` from \@tanstack/react-query@^4.40.0
+ * @example
+ * ```diff
+ * - import { queryOptions } from '@suspensive/react-query'
+ * + import { queryOptions } from '@tanstack/react-query'
+ * ```
  */
-export function queryOptions<
-  TQueryFnData = unknown,
-  TError = unknown,
-  TData = TQueryFnData,
-  TQueryKey extends QueryKey = QueryKey,
->(
-  options: SelectedQueryOptions<TQueryFnData, TError, TData, TQueryKey>
-): SelectedQueryOptions<TQueryFnData, TError, TData, TQueryKey>
-
-export function queryOptions<
-  TQueryFnData = unknown,
-  TError = unknown,
-  TData = TQueryFnData,
-  TQueryKey extends QueryKey = QueryKey,
->(
-  options: UnSelectedQueryOptions<TQueryFnData, TError, TData, TQueryKey>
-): UnSelectedQueryOptions<TQueryFnData, TError, TData, TQueryKey>
-
-export function queryOptions(options: unknown) {
-  return options
-}
+export const queryOptions = original_queryOptions

packages/react-query-4/src/usePrefetchQuery.test-d.tsx

@@ -1,4 +1,4 @@
-import { queryOptions } from './queryOptions'
+import { queryOptions } from '@tanstack/react-query'
 import { queryFn, queryKey } from './test-utils'
 import { usePrefetchQuery } from './usePrefetchQuery'
 

packages/react-query-4/src/useSuspenseQueries.test-d.ts

@@ -1,8 +1,6 @@
+import { type UseSuspenseQueryResult, queryOptions, useSuspenseQueries } from '@tanstack/react-query'
 import { describe, expectTypeOf, it } from 'vitest'
-import { queryOptions } from './queryOptions'
 import { queryFn, queryKey, select } from './test-utils'
-import { useSuspenseQueries } from './useSuspenseQueries'
-import type { UseSuspenseQueryResult } from './useSuspenseQuery'
 
 describe('useSuspenseQueries', () => {
   it('type check', () => {
@@ -66,15 +64,15 @@ describe('useSuspenseQueries', () => {
     })
 
     expectTypeOf(query).toEqualTypeOf<UseSuspenseQueryResult<{ text: string }>>()
-    expectTypeOf(query.status).toEqualTypeOf<`success`>()
+    expectTypeOf(query.status).toEqualTypeOf<'error' | 'success'>()
     expectTypeOf(query.data).toEqualTypeOf<{ text: string }>()
 
     expectTypeOf(selectedQuery).toEqualTypeOf<UseSuspenseQueryResult<string>>()
-    expectTypeOf(selectedQuery.status).toEqualTypeOf<`success`>()
+    expectTypeOf(selectedQuery.status).toEqualTypeOf<'error' | 'success'>()
     expectTypeOf(selectedQuery.data).toEqualTypeOf<string>()
 
     expectTypeOf(selectedQueryByQueryOptions).toEqualTypeOf<UseSuspenseQueryResult<string>>()
-    expectTypeOf(selectedQueryByQueryOptions.status).toEqualTypeOf<`success`>()
+    expectTypeOf(selectedQueryByQueryOptions.status).toEqualTypeOf<'error' | 'success'>()
     expectTypeOf(selectedQueryByQueryOptions.data).toEqualTypeOf<string>()
   })
 })