feat(react-query): backport usePrefetchQuery, usePrefetchInfiniteQuery

.changeset/config.json

@@ -5,7 +5,22 @@
   "access": "public",
   "baseBranch": "v4",
   "updateInternalDependencies": "patch",
-  "fixed": [],
+  "fixed": [
+    [
+      "@tanstack/eslint-plugin-query",
+      "@tanstack/query-async-storage-persister",
+      "@tanstack/query-broadcast-client-experimental",
+      "@tanstack/query-core",
+      "@tanstack/query-persist-client-core",
+      "@tanstack/query-sync-storage-persister",
+      "@tanstack/react-query",
+      "@tanstack/react-query-devtools",
+      "@tanstack/react-query-persist-client",
+      "@tanstack/solid-query",
+      "@tanstack/svelte-query",
+      "@tanstack/vue-query"
+    ]
+  ],
   "linked": [],
   "ignore": [],
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {

.changeset/fast-snails-clap.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/react-query': minor
+---
+
+feat(react-query): backport usePrefetchQuery, usePrefetchInfiniteQuery

packages/react-query/src/__tests__/usePrefetchInfiniteQuery.types.test.tsx

@@ -0,0 +1,45 @@
+import { expectTypeOf } from 'expect-type'
+import { usePrefetchInfiniteQuery } from '../usePrefetchInfiniteQuery'
+import { doNotExecute } from './utils'
+
+describe('usePrefetchInfiniteQuery', () => {
+  it('should return nothing', () => {
+    doNotExecute(() => {
+      const result = usePrefetchInfiniteQuery({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+        getNextPageParam: () => 1,
+      })
+
+      expectTypeOf(result).toEqualTypeOf<void>()
+    })
+  })
+
+  it('should not allow refetchInterval, enabled or throwOnError options', () => {
+    doNotExecute(() => {
+      usePrefetchInfiniteQuery({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+        getNextPageParam: () => 1,
+        // @ts-expect-error TS2353
+        refetchInterval: 1000,
+      })
+
+      usePrefetchInfiniteQuery({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+        getNextPageParam: () => 1,
+        // @ts-expect-error TS2353
+        enabled: true,
+      })
+
+      usePrefetchInfiniteQuery({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+        getNextPageParam: () => 1,
+        // @ts-expect-error TS2353
+        throwOnError: true,
+      })
+    })
+  })
+})

packages/react-query/src/__tests__/usePrefetchQuery.types.test.tsx

@@ -0,0 +1,56 @@
+import { expectTypeOf } from 'expect-type'
+import { usePrefetchQuery } from '..'
+import { doNotExecute } from './utils'
+
+describe('usePrefetchQuery', () => {
+  it('should return nothing', () => {
+    doNotExecute(() => {
+      const result = usePrefetchQuery({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+      })
+
+      expectTypeOf(result).toEqualTypeOf<void>()
+    })
+  })
+
+  it('should not allow refetchInterval, enabled or throwOnError options', () => {
+    doNotExecute(() => {
+      usePrefetchQuery({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+        // @ts-expect-error TS2345
+        refetchInterval: 1000,
+      })
+
+      usePrefetchQuery({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+        // @ts-expect-error TS2345
+        enabled: true,
+      })
+
+      usePrefetchQuery({
+        queryKey: ['key'],
+        queryFn: () => Promise.resolve(5),
+        // @ts-expect-error TS2345
+        throwOnError: true,
+      })
+    })
+  })
+
+  it('should not allow skipToken in queryFn', () => {
+    doNotExecute(() => {
+      usePrefetchQuery({
+        queryKey: ['key'],
+        // @ts-expect-error
+        queryFn: skipToken,
+      })
+      usePrefetchQuery({
+        queryKey: ['key'],
+        // @ts-expect-error
+        queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5),
+      })
+    })
+  })
+})

packages/react-query/src/index.ts

@@ -46,3 +46,5 @@ export { useIsMutating } from './useIsMutating'
 export { useMutation } from './useMutation'
 export { useInfiniteQuery } from './useInfiniteQuery'
 export { useIsRestoring, IsRestoringProvider } from './isRestoring'
+export { usePrefetchQuery } from './usePrefetchQuery'
+export { usePrefetchInfiniteQuery } from './usePrefetchInfiniteQuery'

packages/react-query/src/usePrefetchInfiniteQuery.ts

@@ -0,0 +1,23 @@
+import { useQueryClient } from './QueryClientProvider'
+import type {
+  FetchInfiniteQueryOptions,
+  QueryKey,
+  WithRequired,
+} from '@tanstack/query-core'
+
+export function usePrefetchInfiniteQuery<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  options: WithRequired<
+    FetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+    'queryKey'
+  >,
+) {
+  const client = useQueryClient()
+  if (!client.getQueryState(options.queryKey)) {
+    client.prefetchInfiniteQuery(options)
+  }
+}

packages/react-query/src/usePrefetchQuery.ts

@@ -0,0 +1,23 @@
+import { useQueryClient } from './QueryClientProvider'
+import type {
+  FetchQueryOptions,
+  QueryKey,
+  WithRequired,
+} from '@tanstack/query-core'
+
+export function usePrefetchQuery<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  options: WithRequired<
+    FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+    'queryKey'
+  >,
+) {
+  const client = useQueryClient()
+  if (!client.getQueryState(options.queryKey)) {
+    client.prefetchQuery(options)
+  }
+}