feat(react-query): add usePrefetchQuery, usePrefetchInfiniteQuery (#1252

)

close #1250 

## PR Checklist

- [x] I did below actions if need

1. I read the [Contributing
Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md)
2. I added documents and tests.

---------

Co-authored-by: halfstack <61955474+ha1fstack@users.noreply.github.com>
Co-authored-by: GwanSik Kim <39869096+gwansikk@users.noreply.github.com>

.changeset/shy-wolves-train.md

@@ -0,0 +1,6 @@
+---
+"@suspensive/react-query-4": minor
+"@suspensive/react-query-5": minor
+---
+
+feat(react-query): add usePrefetchQuery, usePrefetchInfiniteQuery

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

@@ -8,6 +8,8 @@ export { useSuspenseQueries } from './useSuspenseQueries'
 export type { SuspenseQueriesOptions, SuspenseQueriesResults } from './useSuspenseQueries'
 export { useSuspenseInfiniteQuery } from './useSuspenseInfiniteQuery'
 export type { UseSuspenseInfiniteQueryOptions, UseSuspenseInfiniteQueryResult } from './useSuspenseInfiniteQuery'
+export { usePrefetchQuery } from './usePrefetchQuery'
+export { usePrefetchInfiniteQuery } from './usePrefetchInfiniteQuery'
 
 export { SuspenseQuery } from './SuspenseQuery'
 export { SuspenseQueries } from './SuspenseQueries'

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

@@ -3,6 +3,7 @@ import { type InfiniteData, type UseInfiniteQueryResult, useInfiniteQuery, useQu
 import { describe, expectTypeOf, it } from 'vitest'
 import { infiniteQueryOptions } from './infiniteQueryOptions'
 import { SuspenseInfiniteQuery } from './SuspenseInfiniteQuery'
+import { usePrefetchInfiniteQuery } from './usePrefetchInfiniteQuery'
 import { type UseSuspenseInfiniteQueryResult, useSuspenseInfiniteQuery } from './useSuspenseInfiniteQuery'
 
 const infiniteQuery = {
@@ -77,7 +78,12 @@ describe('infiniteQueryOptions', () => {
       </SuspenseInfiniteQuery>
     ))()
   })
-
+  it('should be used with usePrefetchInfiniteQuery', () => {
+    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+    expectTypeOf(usePrefetchInfiniteQuery(infiniteQuery.options1())).toMatchTypeOf<void>()
+    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+    expectTypeOf(usePrefetchInfiniteQuery({ ...infiniteQuery.options1() })).toMatchTypeOf<void>()
+  })
   it('should be used with useQueryClient', async () => {
     const queryClient = useQueryClient()
 

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

@@ -3,6 +3,7 @@ import { type UseQueryResult, useQueries, useQuery, useQueryClient } from '@tans
 import { describe, expectTypeOf, it } from 'vitest'
 import { queryOptions } from './queryOptions'
 import { SuspenseQuery } from './SuspenseQuery'
+import { usePrefetchQuery } from './usePrefetchQuery'
 import { useSuspenseQueries } from './useSuspenseQueries'
 import { type UseSuspenseQueryResult, useSuspenseQuery } from './useSuspenseQuery'
 
@@ -56,7 +57,6 @@ describe('queryOptions', () => {
       </SuspenseQuery>
     ))()
   })
-
   it('should be used with useQueries', () => {
     const [query1, query2, query3] = useQueries({
       queries: [
@@ -102,7 +102,12 @@ describe('queryOptions', () => {
     expectTypeOf(query3).toEqualTypeOf<UseSuspenseQueryResult<string>>()
     expectTypeOf(query3.data).toEqualTypeOf<string>()
   })
-
+  it('should be used with usePrefetchQuery', () => {
+    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+    expectTypeOf(usePrefetchQuery(query.options1())).toMatchTypeOf<void>()
+    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+    expectTypeOf(usePrefetchQuery({ ...query.options1() })).toMatchTypeOf<void>()
+  })
   it('should be used with useQueryClient', async () => {
     const queryClient = useQueryClient()
 

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

@@ -0,0 +1,14 @@
+import { type FetchInfiniteQueryOptions, type QueryKey, useQueryClient } from '@tanstack/react-query'
+
+export function usePrefetchInfiniteQuery<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(options: FetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>) {
+  const queryClient = useQueryClient()
+
+  if (typeof options.queryKey !== 'undefined' && !queryClient.getQueryState(options.queryKey)) {
+    queryClient.prefetchInfiniteQuery(options)
+  }
+}

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

@@ -0,0 +1,14 @@
+import { type FetchQueryOptions, type QueryKey, useQueryClient } from '@tanstack/react-query'
+
+export function usePrefetchQuery<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(options: FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>) {
+  const queryClient = useQueryClient()
+
+  if (typeof options.queryKey !== 'undefined' && !queryClient.getQueryState(options.queryKey)) {
+    queryClient.prefetchQuery(options)
+  }
+}

packages/react-query-5/src/index.ts

@@ -6,6 +6,8 @@ export { useSuspenseQueries } from './useSuspenseQueries'
 export type { SuspenseQueriesOptions, SuspenseQueriesResults } from './useSuspenseQueries'
 export { useSuspenseInfiniteQuery } from './useSuspenseInfiniteQuery'
 export type { UseSuspenseInfiniteQueryOptions, UseSuspenseInfiniteQueryResult } from './useSuspenseInfiniteQuery'
+export { usePrefetchQuery } from './usePrefetchQuery'
+export { usePrefetchInfiniteQuery } from './usePrefetchInfiniteQuery'
 
 export { SuspenseQuery } from './SuspenseQuery'
 export { SuspenseQueries } from './SuspenseQueries'

packages/react-query-5/src/usePrefetchInfiniteQuery.ts

@@ -0,0 +1,12 @@
+import { usePrefetchInfiniteQuery as original_usePrefetchInfiniteQuery } from '@tanstack/react-query'
+
+/**
+ * This feature is officially supported in \@tanstack/react-query@5, You can proceed with the migration.
+ * @deprecated Use `usePrefetchInfiniteQuery` from \@tanstack/react-query@5
+ * @example
+ * ```diff
+ * - import { usePrefetchInfiniteQuery } from '@suspensive/react-query'
+ * + import { usePrefetchInfiniteQuery } from '@tanstack/react-query'
+ * ```
+ */
+export const usePrefetchInfiniteQuery = original_usePrefetchInfiniteQuery

packages/react-query-5/src/usePrefetchQuery.ts

@@ -0,0 +1,12 @@
+import { usePrefetchQuery as original_usePrefetchQuery } from '@tanstack/react-query'
+
+/**
+ * This feature is officially supported in \@tanstack/react-query@5, You can proceed with the migration.
+ * @deprecated Use `usePrefetchQuery` from \@tanstack/react-query@5
+ * @example
+ * ```diff
+ * - import { usePrefetchQuery } from '@suspensive/react-query'
+ * + import { usePrefetchQuery } from '@tanstack/react-query'
+ * ```
+ */
+export const usePrefetchQuery = original_usePrefetchQuery

packages/react-query/src/scripts/utils/package.spec.ts

@@ -12,6 +12,8 @@ const version4APIs = [
   'useSuspenseQuery',
   'useSuspenseQueries',
   'useSuspenseInfiniteQuery',
+  'usePrefetchQuery',
+  'usePrefetchInfiniteQuery',
   'queryOptions',
   'infiniteQueryOptions',
   'SuspenseQuery',

packages/react-query/src/scripts/utils/package.ts

@@ -91,6 +91,8 @@ export function getTanStackReactQueryAPIs(majorVersionOfTanStackQuery: string):
         'useSuspenseQuery',
         'useSuspenseQueries',
         'useSuspenseInfiniteQuery',
+        'usePrefetchQuery',
+        'usePrefetchInfiniteQuery',
         'queryOptions',
         'infiniteQueryOptions',
       ]