feat(react-query): add usePrefetchQuery, usePrefetchInfiniteQuery

Co-authored-by: halfstack <61955474+ha1fstack@users.noreply.github.com> Co-authored-by: GwanSik Kim <39869096+gwansikk@users.noreply.github.com>
toss · Sep 3, 2024 · 2f3e640 · 2f3e640
1 parent 779121f
commit 2f3e640
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 3 deletions.
diff --git a/packages/react-query-4/src/infiniteQueryOptions.test-d.tsx b/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()
 

diff --git a/packages/react-query-4/src/queryOptions.test-d.tsx b/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()
 

diff --git a/packages/react-query-4/src/usePrefetchInfiniteQuery.ts b/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)
+  }
+}
diff --git a/packages/react-query-4/src/usePrefetchQuery.ts b/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)
+  }
+}
diff --git a/packages/react-query-5/src/usePrefetchInfiniteQuery.ts b/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
diff --git a/packages/react-query-5/src/usePrefetchQuery.ts b/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