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

DogPawHat · 2025-03-02T10:52:20Z

No description provided.

nx-cloud · 2025-03-02T10:52:44Z

View your CI Pipeline Execution ↗ for commit 5f81470.

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

pkg-pr-new · 2025-03-02T10:55:06Z

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

codecov · 2025-03-02T10:58:41Z

Codecov Report

All modified and coverable lines are covered by tests ✅

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%)`	⬆️
@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	`∅ <ø> (∅)`

🚀 New features to boost your workflow:

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

TkDodo · 2025-03-11T19:15:46Z

packages/react-query/src/usePrefetchQueries.tsx

+export function usePrefetchQueries(
+  options: {
+    queries: ReadonlyArray<FetchQueryOptions<any, any, any, any>>
+  },
+  queryClient?: QueryClient,
+) {


is FetchQueryOptions<any, any, any, any> really good enough here?

I extracted out the rather through recursive SuspenseQueriesOptions recursive type reducer from useSuspenseQueries and modified it for using FetchQueryOptions in this case. Although were not gonna be using all that type information in this case at this point.

ryanagillie · 2025-03-31T01:35:38Z

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

TkDodo · 2025-04-04T13:06:27Z

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 ?

DogPawHat · 2025-04-05T20:51:48Z

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)

DogPawHat · 2025-04-05T21:09:57Z

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

TkDodo · 2025-04-06T15:48:05Z

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'),
    },
  ],
})

DogPawHat · 2025-04-08T11:49:52Z

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.

github-actions bot added the package: react-query label Mar 2, 2025

DogPawHat force-pushed the prefetch-queries-hook branch from b3564b1 to 90802bc Compare March 2, 2025 10:52

DogPawHat changed the title ~~[feat(react-query)] Add usePrefetchQueries hook~~ feat(react-query): Add usePrefetchQueries hook Mar 2, 2025

DogPawHat force-pushed the prefetch-queries-hook branch from 90802bc to cfc4a49 Compare March 3, 2025 15:55

github-actions bot added the documentation Improvements or additions to documentation label Mar 5, 2025

TkDodo reviewed Mar 11, 2025

View reviewed changes

DogPawHat force-pushed the prefetch-queries-hook branch from 4b70794 to f8860e5 Compare March 12, 2025 12:17

DogPawHat and others added 5 commits March 12, 2025 12:17

feat(react-query): Add usePrefetchQueries hook

4175f2e

docs(react-query): reference for usePrefetchQueries

710c06b

docs(react-query): usePrefetchQueries docs

361f704

docs(react-query): broken prefetching links

32caa07

ci: apply automated fixes

75ba89f

DogPawHat force-pushed the prefetch-queries-hook branch from f8860e5 to 75ba89f Compare March 12, 2025 12:18

DogPawHat added 4 commits March 12, 2025 14:13

fix(react-query): enforce array of options types

afdf7ec

fix(react-query): update types

8542f89

docs(react-query): small fix

3365397

docs(react-query): grammer

ad28506

DogPawHat added 2 commits April 5, 2025 21:41

Merge branch 'main' into prefetch-queries-hook

0ddc33f

chore: remove unused complicated types

cba33ee

tests(react-query): allow multiple types in query returns

5f81470

DogPawHat force-pushed the prefetch-queries-hook branch from 0179035 to 5f81470 Compare April 8, 2025 11:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

DogPawHat commented Mar 2, 2025

nx-cloud bot commented Mar 2, 2025 •

edited

Loading

pkg-pr-new bot commented Mar 2, 2025 •

edited

Loading

codecov bot commented Mar 2, 2025 •

edited

Loading

TkDodo Mar 11, 2025

DogPawHat Mar 12, 2025

ryanagillie commented Mar 31, 2025

TkDodo commented Apr 4, 2025

DogPawHat commented Apr 5, 2025

DogPawHat commented Apr 5, 2025

TkDodo commented Apr 6, 2025

DogPawHat commented Apr 8, 2025

feat(react-query): Add usePrefetchQueries hook #8734

Are you sure you want to change the base?

feat(react-query): Add usePrefetchQueries hook #8734

Conversation

DogPawHat commented Mar 2, 2025

nx-cloud bot commented Mar 2, 2025 • edited Loading

pkg-pr-new bot commented Mar 2, 2025 • edited Loading

codecov bot commented Mar 2, 2025 • edited Loading

Codecov Report

TkDodo Mar 11, 2025

Choose a reason for hiding this comment

DogPawHat Mar 12, 2025

Choose a reason for hiding this comment

ryanagillie commented Mar 31, 2025

TkDodo commented Apr 4, 2025

DogPawHat commented Apr 5, 2025

DogPawHat commented Apr 5, 2025

TkDodo commented Apr 6, 2025

DogPawHat commented Apr 8, 2025

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

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

nx-cloud bot commented Mar 2, 2025 •

edited

Loading

pkg-pr-new bot commented Mar 2, 2025 •

edited

Loading

codecov bot commented Mar 2, 2025 •

edited

Loading