feat(react-query): update usePrefetchQuery to use new imperitive methods plus tests

Author: DogPawHat

.changeset/warm-candies-like.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/react-query': minor
+---
+
+move usePrefetchQuery to use new methods

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

@@ -51,6 +51,20 @@ describe('infiniteQueryOptions', () => {
       InfiniteData<string, unknown> | undefined
     >()
   })
+  it('should work when passed to useInfiniteQuery with select', () => {
+    const options = infiniteQueryOptions({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve('string'),
+      getNextPageParam: () => 1,
+      initialPageParam: 1,
+      select: (data) => data.pages,
+    })
+
+    const { data } = useInfiniteQuery(options)
+
+    // known issue: type of pageParams is unknown when returned from useInfiniteQuery
+    expectTypeOf(data).toEqualTypeOf<Array<string> | undefined>()
+  })
   it('should work when passed to useSuspenseInfiniteQuery', () => {
     const options = infiniteQueryOptions({
       queryKey: queryKey(),
@@ -63,6 +77,19 @@ describe('infiniteQueryOptions', () => {
 
     expectTypeOf(data).toEqualTypeOf<InfiniteData<string, unknown>>()
   })
+  it('should work when passed to useSuspenseInfiniteQuery with select', () => {
+    const options = infiniteQueryOptions({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve('string'),
+      getNextPageParam: () => 1,
+      initialPageParam: 1,
+      select: (data) => data.pages,
+    })
+
+    const { data } = useSuspenseInfiniteQuery(options)
+
+    expectTypeOf(data).toEqualTypeOf<Array<string>>()
+  })
   it('should work when passed to infiniteQuery', async () => {
     const options = infiniteQueryOptions({
       queryKey: ['key'],
@@ -125,6 +152,19 @@ describe('infiniteQueryOptions', () => {
 
     expectTypeOf(data).toEqualTypeOf<InfiniteData<string, number>>()
   })
+  it('should ignore select when passed to fetchInfiniteQuery', async () => {
+    const options = infiniteQueryOptions({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve('string'),
+      getNextPageParam: () => 1,
+      initialPageParam: 1,
+      select: (data) => data.pages,
+    })
+
+    const data = await new QueryClient().fetchInfiniteQuery(options)
+
+    expectTypeOf(data).toEqualTypeOf<InfiniteData<string, number>>()
+  })
   it('should tag the queryKey with the result type of the QueryFn', () => {
     const { queryKey: tagged } = infiniteQueryOptions({
       queryKey: queryKey(),

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

@@ -105,6 +105,16 @@ describe('queryOptions', () => {
     const data = await new QueryClient().query(options)
     expectTypeOf(data).toEqualTypeOf<unknown>()
   })
+  it('should ignore select when passed to fetchQuery', async () => {
+    const options = queryOptions({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+      select: (data) => data.toString(),
+    })
+
+    const data = await new QueryClient().fetchQuery(options)
+    expectTypeOf(data).toEqualTypeOf<number>()
+  })
   it('should work when passed to useQueries', () => {
     const options = queryOptions({
       queryKey: queryKey(),

packages/react-query/src/__tests__/useInfiniteQuery.test-d.tsx

@@ -38,6 +38,18 @@ describe('pageParam', () => {
     })
   })
 
+  it('initialPageParam should define type of param passed to queryFunctionContext for infiniteQuery', () => {
+    const queryClient = new QueryClient()
+    queryClient.infiniteQuery({
+      queryKey: ['key'],
+      queryFn: ({ pageParam }) => {
+        expectTypeOf(pageParam).toEqualTypeOf<number>()
+        return Promise.resolve(pageParam)
+      },
+      initialPageParam: 1,
+    })
+  })
+
   it('initialPageParam should define type of param passed to queryFunctionContext for prefetchInfiniteQuery', () => {
     const queryClient = new QueryClient()
     queryClient.prefetchInfiniteQuery({

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

@@ -1,6 +1,6 @@
 import { assertType, describe, expectTypeOf, it } from 'vitest'
 import { queryKey } from '@tanstack/query-test-utils'
-import { skipToken, usePrefetchQuery } from '..'
+import { usePrefetchQuery } from '..'
 
 describe('usePrefetchQuery', () => {
   it('should return nothing', () => {
@@ -12,7 +12,7 @@ describe('usePrefetchQuery', () => {
     expectTypeOf(result).toEqualTypeOf<void>()
   })
 
-  it('should not allow refetchInterval, enabled or throwOnError options', () => {
+  it('should not allow refetchInterval, or throwOnError options', () => {
     assertType(
       usePrefetchQuery({
         queryKey: queryKey(),
@@ -22,15 +22,6 @@ describe('usePrefetchQuery', () => {
       }),
     )
 
-    assertType(
-      usePrefetchQuery({
-        queryKey: queryKey(),
-        queryFn: () => Promise.resolve(5),
-        // @ts-expect-error TS2345
-        enabled: true,
-      }),
-    )
-
     assertType(
       usePrefetchQuery({
         queryKey: queryKey(),
@@ -40,21 +31,4 @@ describe('usePrefetchQuery', () => {
       }),
     )
   })
-
-  it('should not allow skipToken in queryFn', () => {
-    assertType(
-      usePrefetchQuery({
-        queryKey: queryKey(),
-        // @ts-expect-error
-        queryFn: skipToken,
-      }),
-    )
-    assertType(
-      usePrefetchQuery({
-        queryKey: queryKey(),
-        // @ts-expect-error
-        queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5),
-      }),
-    )
-  })
 })

packages/react-query/src/__tests__/useQuery.promise.test.tsx

@@ -730,6 +730,62 @@ describe('useQuery().promise', { timeout: 10_000 }, () => {
     expect(queryFn).toHaveBeenCalledOnce()
   })
 
+  it('should dedupe when re-fetched with queryClient.query while suspending', async () => {
+    const key = queryKey()
+    const renderStream = createRenderStream({ snapshotDOM: true })
+    const queryFn = vi.fn().mockImplementation(async () => {
+      await vi.advanceTimersByTimeAsync(10)
+      return 'test'
+    })
+
+    const options = {
+      queryKey: key,
+      queryFn,
+    }
+
+    function MyComponent(props: { promise: Promise<string> }) {
+      const data = React.use(props.promise)
+
+      return <>{data}</>
+    }
+
+    function Loading() {
+      return <>loading..</>
+    }
+    function Page() {
+      const query = useQuery(options)
+
+      return (
+        <div>
+          <React.Suspense fallback={<Loading />}>
+            <MyComponent promise={query.promise} />
+          </React.Suspense>
+          <button onClick={() => queryClient.query(options)}>fetch</button>
+        </div>
+      )
+    }
+
+    const rendered = await renderStream.render(
+      <QueryClientProvider client={queryClient}>
+        <Page />
+      </QueryClientProvider>,
+    )
+
+    {
+      const { withinDOM } = await renderStream.takeRender()
+      withinDOM().getByText('loading..')
+    }
+
+    rendered.getByText('fetch').click()
+
+    {
+      const { withinDOM } = await renderStream.takeRender()
+      withinDOM().getByText('test')
+    }
+
+    expect(queryFn).toHaveBeenCalledOnce()
+  })
+
   it('should dedupe when re-fetched with refetchQueries while suspending', async () => {
     const key = queryKey()
     let count = 0

packages/react-query/src/types.ts

@@ -5,7 +5,6 @@ import type {
   DefinedInfiniteQueryObserverResult,
   DefinedQueryObserverResult,
   DistributiveOmit,
-  FetchQueryOptions,
   InfiniteQueryObserverOptions,
   InfiniteQueryObserverResult,
   MutateFunction,
@@ -46,21 +45,6 @@ export interface UseBaseQueryOptions<
   subscribed?: boolean
 }
 
-export interface UsePrefetchQueryOptions<
-  TQueryFnData = unknown,
-  TError = DefaultError,
-  TData = TQueryFnData,
-  TQueryKey extends QueryKey = QueryKey,
-> extends OmitKeyof<
-  FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
-  'queryFn'
-> {
-  queryFn?: Exclude<
-    FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>['queryFn'],
-    SkipToken
-  >
-}
-
 export type AnyUseQueryOptions = UseQueryOptions<any, any, any, any>
 export interface UseQueryOptions<
   TQueryFnData = unknown,

packages/react-query/src/usePrefetchInfiniteQuery.tsx

@@ -1,7 +1,9 @@
+import { noop } from '@tanstack/query-core'
 import { useQueryClient } from './QueryClientProvider'
+
 import type {
   DefaultError,
-  FetchInfiniteQueryOptions,
+  InfiniteQueryExecuteOptions,
   QueryClient,
   QueryKey,
 } from '@tanstack/query-core'
@@ -13,7 +15,7 @@ export function usePrefetchInfiniteQuery<
   TQueryKey extends QueryKey = QueryKey,
   TPageParam = unknown,
 >(
-  options: FetchInfiniteQueryOptions<
+  options: InfiniteQueryExecuteOptions<
     TQueryFnData,
     TError,
     TData,
@@ -25,6 +27,6 @@ export function usePrefetchInfiniteQuery<
   const client = useQueryClient(queryClient)
 
   if (!client.getQueryState(options.queryKey)) {
-    client.prefetchInfiniteQuery(options)
+    void client.infiniteQuery(options).then(noop).catch(noop)
   }
 }

packages/react-query/src/usePrefetchQuery.tsx

@@ -1,19 +1,25 @@
+import { noop } from '@tanstack/query-core'
 import { useQueryClient } from './QueryClientProvider'
-import type { DefaultError, QueryClient, QueryKey } from '@tanstack/query-core'
-import type { UsePrefetchQueryOptions } from './types'
+
+import type {
+  DefaultError,
+  QueryClient,
+  QueryExecuteOptions,
+  QueryKey,
+} from '@tanstack/query-core'
 
 export function usePrefetchQuery<
   TQueryFnData = unknown,
   TError = DefaultError,
   TData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey,
 >(
-  options: UsePrefetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+  options: QueryExecuteOptions<TQueryFnData, TError, TData, TQueryKey>,
   queryClient?: QueryClient,
 ) {
   const client = useQueryClient(queryClient)
 
   if (!client.getQueryState(options.queryKey)) {
-    client.prefetchQuery(options)
+    void client.query(options).then(noop).catch(noop)
   }
 }