query feat(react-query): Add `usePrefetchQueries` hook

Mar 02 '25 10:03 DogPawHat

View your CI Pipeline Execution ↗ for commit 5f81470810b1b8d935d9cacc76cdf9190202a0fc.

Command	Status	Duration	Result
`nx affected --targets=test:sherif,test:knip,tes...`	❌ Failed	3m 35s	View ↗
`nx run-many --target=build --exclude=examples/*...`	✅ Succeeded	35s	View ↗

☁️ Nx Cloud last updated this comment at 2025-04-08 12:01:04 UTC

Mar 02 '25 10:03 nx-cloud[bot]

More templates

@tanstack/angular-query-devtools-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-devtools-experimental@8734

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@8734

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@8734

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@8734

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@8734

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@8734

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@8734

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@8734

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@8734

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@8734

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@8734

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@8734

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@8734

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@8734

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@8734

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@8734

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@8734

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@8734

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@8734

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@8734

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@8734

commit: 5f81470

Mar 02 '25 10:03 pkg-pr-new[bot]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 84.92%. Comparing base (3319d35) to head (0179035). Report is 9 commits behind head on main.

Additional details and impacted files

@@             Coverage Diff             @@
##             main    #8734       +/-   ##
===========================================
+ Coverage   44.09%   84.92%   +40.82%     
===========================================
  Files         201       27      -174     
  Lines        8025      378     -7647     
  Branches     1770      111     -1659     
===========================================
- Hits         3539      321     -3218     
+ Misses       4058       49     -4009     
+ Partials      428        8      -420

Components	Coverage Δ
@tanstack/angular-query-devtools-experimental	`∅ <ø> (∅)`
@tanstack/angular-query-experimental	`∅ <ø> (∅)`
@tanstack/eslint-plugin-query	`∅ <ø> (∅)`
@tanstack/query-async-storage-persister	`∅ <ø> (∅)`
@tanstack/query-broadcast-client-experimental	`∅ <ø> (∅)`
@tanstack/query-codemods	`∅ <ø> (∅)`
@tanstack/query-core	`∅ <ø> (∅)`
@tanstack/query-devtools	`∅ <ø> (∅)`
@tanstack/query-persist-client-core	`∅ <ø> (∅)`
@tanstack/query-sync-storage-persister	`∅ <ø> (∅)`
@tanstack/react-query	`96.14% <100.00%> (+0.71%)`	:arrow_up:
@tanstack/react-query-devtools	`10.00% <ø> (ø)`
@tanstack/react-query-next-experimental	`∅ <ø> (∅)`
@tanstack/react-query-persist-client	`100.00% <ø> (ø)`
@tanstack/solid-query	`∅ <ø> (∅)`
@tanstack/solid-query-devtools	`∅ <ø> (∅)`
@tanstack/solid-query-persist-client	`∅ <ø> (∅)`
@tanstack/svelte-query	`∅ <ø> (∅)`
@tanstack/svelte-query-devtools	`∅ <ø> (∅)`
@tanstack/svelte-query-persist-client	`∅ <ø> (∅)`
@tanstack/vue-query	`∅ <ø> (∅)`
@tanstack/vue-query-devtools	`∅ <ø> (∅)`

:rocket: New features to boost your workflow:

:snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
:package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Mar 02 '25 10:03 codecov[bot]

Any update on getting this merged? This would be very useful

Mar 31 '25 01:03 ryanagillie

not a big fan of adding a new API for this. The types also shouldn’t need to be that complex because we don’t need to infer return types (there is no return type).

what stops from having usePrefetchQuery accept variadic arguments to prefetch multiple queries ?

Apr 04 '25 13:04 TkDodo

Yeah I wasn't sure if we really needed that complex type inference machine myself, wasn't sure what the standard was.

what stops from having usePrefetchQuery accept variadic arguments to prefetch multiple queries ?

not a lot I think apart from the fact the library seems to have a convention that methods that take in multiple queries are called *Queries rather then *Query (useSuspenseQuery vs useSuspenseQueries)

Apr 05 '25 20:04 DogPawHat

You'd go with something like this I think:

// usePrefetchQueries.tsx
export function usePrefetchQueries<
  TQueryFnData = unknown,
  TError = DefaultError,
  TData = TQueryFnData,
  TQueryKey extends QueryKey = QueryKey,
>(
  options:
    | FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>
    | {
        queries: ReadonlyArray<
          FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>
        >
      },
  queryClient?: QueryClient,
) {
  const client = useQueryClient(queryClient)

  const queryArray = 'queries' in options ? options.queries : [options]

  for (const query of queryArray) {
    if (!client.getQueryState(query.queryKey)) {
      client.prefetchQuery(query)
    }
  }
}

// usePrefetchQuery.ts
/**
 * @deprecated Use `usePrefetchQueries` instead.
 */
export function usePrefetchQuery<
  TQueryFnData = unknown,
  TError = DefaultError,
  TData = TQueryFnData,
  TQueryKey extends QueryKey = QueryKey,
>(
  options: FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
  queryClient?: QueryClient,
) {
  return usePrefetchQueries(options, queryClient)
}

with usePrefetchQuery removed in v6

Apr 05 '25 21:04 DogPawHat

okay, I think it’s more complicated than that, my bad. It obviously needs the complex types because otherwise you can’t do this:

usePrefetchQueries({
  queries: [
    {
      queryKey: ['key'],
      queryFn: () => Promise.resolve(5),
    },
    {
      queryKey: ['key'],
      queryFn: () => Promise.resolve('string'),
    },
  ],
})

Apr 06 '25 15:04 TkDodo

Not sure that's the case I think. Pushing new tests now, will go over this in a bit, but I don't think the default FetchQueriesOptions generic is blocking this.

Apr 08 '25 11:04 DogPawHat