-
-
Notifications
You must be signed in to change notification settings - Fork 2.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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 <[email protected]> * Apply suggestions from code review Co-authored-by: Fredrik Höglund <[email protected]> * chore: fix types in tests * chore: add new tests (#7614) * chore: add new tests * Apply suggestions from code review --------- Co-authored-by: Dominik Dorfmeister <[email protected]> --------- Co-authored-by: Bruno Lopes <[email protected]> Co-authored-by: Fredrik Höglund <[email protected]>
- Loading branch information
1 parent
6355244
commit fbfe940
Showing
8 changed files
with
656 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
37 changes: 37 additions & 0 deletions
37
docs/framework/react/reference/usePrefetchInfiniteQuery.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
--- | ||
id: usePrefetchInfiniteQuery | ||
title: usePrefetchInfiniteQuery | ||
--- | ||
|
||
```tsx | ||
const result = usePrefetchInfiniteQuery(options) | ||
``` | ||
|
||
**Options** | ||
|
||
You can pass everything to `usePrefetchInfiniteQuery` that you can pass to [`queryClient.prefetchInfiniteQuery`](../../../reference/QueryClient#queryclientprefetchinfinitequery). Remember that some of them are required as below: | ||
|
||
- `queryKey: QueryKey` | ||
|
||
- **Required** | ||
- The query key to prefetch during render | ||
|
||
- `queryFn: (context: QueryFunctionContext) => Promise<TData>` | ||
|
||
- **Required, but only if no default query function has been defined** See [Default Query Function](../../guides/default-query-function) for more information. | ||
|
||
- `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** | ||
|
||
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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
--- | ||
id: usePrefetchQuery | ||
title: usePrefetchQuery | ||
--- | ||
|
||
```tsx | ||
const result = usePrefetchQuery(options) | ||
``` | ||
|
||
**Options** | ||
|
||
You can pass everything to `usePrefetchQuery` that you can pass to [`queryClient.prefetchQuery`](../../../reference/QueryClient#queryclientprefetchquery). Remember that some of them are required as below: | ||
|
||
- `queryKey: QueryKey` | ||
|
||
- **Required** | ||
- The query key to prefetch during render | ||
|
||
- `queryFn: (context: QueryFunctionContext) => Promise<TData>` | ||
- **Required, but only if no default query function has been defined** See [Default Query Function](../../guides/default-query-function) for more information. | ||
|
||
**Returns** | ||
|
||
The `usePrefetchQuery` 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 [`useSuspenseQuery`](../reference/useSuspenseQuery). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,80 @@ | ||
import { describe, expectTypeOf, it } from 'vitest' | ||
import { usePrefetchInfiniteQuery, usePrefetchQuery } from '../prefetch' | ||
|
||
describe('usePrefetchQuery', () => { | ||
it('should return nothing', () => { | ||
const result = usePrefetchQuery({ | ||
queryKey: ['key'], | ||
queryFn: () => Promise.resolve(5), | ||
}) | ||
|
||
expectTypeOf(result).toEqualTypeOf<void>() | ||
}) | ||
|
||
it('should not allow refetchInterval, enabled or throwOnError options', () => { | ||
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, | ||
}) | ||
}) | ||
}) | ||
|
||
describe('useInfinitePrefetchQuery', () => { | ||
it('should return nothing', () => { | ||
const result = usePrefetchInfiniteQuery({ | ||
queryKey: ['key'], | ||
queryFn: () => Promise.resolve(5), | ||
initialPageParam: 1, | ||
getNextPageParam: () => 1, | ||
}) | ||
|
||
expectTypeOf(result).toEqualTypeOf<void>() | ||
}) | ||
|
||
it('should require initialPageParam and getNextPageParam', () => { | ||
// @ts-expect-error TS2345 | ||
usePrefetchInfiniteQuery({ | ||
queryKey: ['key'], | ||
queryFn: () => Promise.resolve(5), | ||
}) | ||
}) | ||
|
||
it('should not allow refetchInterval, enabled or throwOnError options', () => { | ||
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, | ||
}) | ||
}) | ||
}) |
Oops, something went wrong.