SIGN IN SIGN UP
TanStack / query UNCLAIMED

🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.

49011 0 1 TypeScript
feat(react-query): usePrefetchQuery (#7582) * feat: usePrefetchQuery * refactor: switch to actual prefetching * refactor: remove ensureInfiniteQueryData function will do in a separate PR * chore: add tests for usePrefetchQuery and usePrefetchInfiniteQuery (#7586) * chore: add tests for usePrefetchQuery and usePrefetchInfiniteQuery * chore: update tests to assert the alternative spy is not called * chore: add some new tests * chore: remove it.only whoops * chore: call mockClear after fetching * chore: improve waterfall test by asserting fallback calls instead of loading node query * chore: improve code repetition * chore: add some generics to helper functions * usePrefetchQuery type tests and docs (#7592) * chore: add type tests and docs * chore: update hooks to use FetchQueryOptions and FetchInfiniteQueryOptions * chore: update tests * chore: update docs * chore: remove .md extension from link * chore: add unknown default value to TQueryFnData * Apply suggestions from code review --------- Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc> * Apply suggestions from code review Co-authored-by: Fredrik Höglund <fredrik.hoglund@gmail.com> * chore: fix types in tests * chore: add new tests (#7614) * chore: add new tests * Apply suggestions from code review --------- Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc> --------- Co-authored-by: Bruno Lopes <88719327+brunolopesr@users.noreply.github.com> Co-authored-by: Fredrik Höglund <fredrik.hoglund@gmail.com>
2024-06-25 14:25:28 +02:00
---
id: usePrefetchInfiniteQuery
title: usePrefetchInfiniteQuery
---
```tsx
usePrefetchInfiniteQuery(options)
feat(react-query): usePrefetchQuery (#7582) * feat: usePrefetchQuery * refactor: switch to actual prefetching * refactor: remove ensureInfiniteQueryData function will do in a separate PR * chore: add tests for usePrefetchQuery and usePrefetchInfiniteQuery (#7586) * chore: add tests for usePrefetchQuery and usePrefetchInfiniteQuery * chore: update tests to assert the alternative spy is not called * chore: add some new tests * chore: remove it.only whoops * chore: call mockClear after fetching * chore: improve waterfall test by asserting fallback calls instead of loading node query * chore: improve code repetition * chore: add some generics to helper functions * usePrefetchQuery type tests and docs (#7592) * chore: add type tests and docs * chore: update hooks to use FetchQueryOptions and FetchInfiniteQueryOptions * chore: update tests * chore: update docs * chore: remove .md extension from link * chore: add unknown default value to TQueryFnData * Apply suggestions from code review --------- Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc> * Apply suggestions from code review Co-authored-by: Fredrik Höglund <fredrik.hoglund@gmail.com> * chore: fix types in tests * chore: add new tests (#7614) * chore: add new tests * Apply suggestions from code review --------- Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc> --------- Co-authored-by: Bruno Lopes <88719327+brunolopesr@users.noreply.github.com> Co-authored-by: Fredrik Höglund <fredrik.hoglund@gmail.com>
2024-06-25 14:25:28 +02:00
```
**Options**
2025-03-18 09:45:11 +01:00
You can pass everything to `usePrefetchInfiniteQuery` that you can pass to [`queryClient.prefetchInfiniteQuery`](../../../reference/QueryClient.md#queryclientprefetchinfinitequery). Remember that some of them are required as below:
feat(react-query): usePrefetchQuery (#7582) * feat: usePrefetchQuery * refactor: switch to actual prefetching * refactor: remove ensureInfiniteQueryData function will do in a separate PR * chore: add tests for usePrefetchQuery and usePrefetchInfiniteQuery (#7586) * chore: add tests for usePrefetchQuery and usePrefetchInfiniteQuery * chore: update tests to assert the alternative spy is not called * chore: add some new tests * chore: remove it.only whoops * chore: call mockClear after fetching * chore: improve waterfall test by asserting fallback calls instead of loading node query * chore: improve code repetition * chore: add some generics to helper functions * usePrefetchQuery type tests and docs (#7592) * chore: add type tests and docs * chore: update hooks to use FetchQueryOptions and FetchInfiniteQueryOptions * chore: update tests * chore: update docs * chore: remove .md extension from link * chore: add unknown default value to TQueryFnData * Apply suggestions from code review --------- Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc> * Apply suggestions from code review Co-authored-by: Fredrik Höglund <fredrik.hoglund@gmail.com> * chore: fix types in tests * chore: add new tests (#7614) * chore: add new tests * Apply suggestions from code review --------- Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc> --------- Co-authored-by: Bruno Lopes <88719327+brunolopesr@users.noreply.github.com> Co-authored-by: Fredrik Höglund <fredrik.hoglund@gmail.com>
2024-06-25 14:25:28 +02:00
- `queryKey: QueryKey`
- **Required**
- The query key to prefetch during render
- `queryFn: (context: QueryFunctionContext) => Promise<TData>`
2025-03-18 09:45:11 +01:00
- **Required, but only if no default query function has been defined** See [Default Query Function](../guides/default-query-function.md) for more information.
feat(react-query): usePrefetchQuery (#7582) * feat: usePrefetchQuery * refactor: switch to actual prefetching * refactor: remove ensureInfiniteQueryData function will do in a separate PR * chore: add tests for usePrefetchQuery and usePrefetchInfiniteQuery (#7586) * chore: add tests for usePrefetchQuery and usePrefetchInfiniteQuery * chore: update tests to assert the alternative spy is not called * chore: add some new tests * chore: remove it.only whoops * chore: call mockClear after fetching * chore: improve waterfall test by asserting fallback calls instead of loading node query * chore: improve code repetition * chore: add some generics to helper functions * usePrefetchQuery type tests and docs (#7592) * chore: add type tests and docs * chore: update hooks to use FetchQueryOptions and FetchInfiniteQueryOptions * chore: update tests * chore: update docs * chore: remove .md extension from link * chore: add unknown default value to TQueryFnData * Apply suggestions from code review --------- Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc> * Apply suggestions from code review Co-authored-by: Fredrik Höglund <fredrik.hoglund@gmail.com> * chore: fix types in tests * chore: add new tests (#7614) * chore: add new tests * Apply suggestions from code review --------- Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc> --------- Co-authored-by: Bruno Lopes <88719327+brunolopesr@users.noreply.github.com> Co-authored-by: Fredrik Höglund <fredrik.hoglund@gmail.com>
2024-06-25 14:25:28 +02:00
- `initialPageParam: TPageParam`
- **Required**
- The default page param to use when fetching the first page.
- `getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) => TPageParam | undefined | null`
- **Required**
- When new data is received for this query, this function receives both the last page of the infinite list of data and the full array of all pages, as well as pageParam information.
- It should return a **single variable** that will be passed as the last optional parameter to your query function.
- Return `undefined` or `null` to indicate there is no next page available.
- **Returns**
2025-03-18 09:45:11 +01:00
The `usePrefetchInfiniteQuery` does not return anything, it should be used just to fire a prefetch during render, before a suspense boundary that wraps a component that uses [`useSuspenseInfiniteQuery`](../reference/useSuspenseInfiniteQuery.md)