Skip to content

Commit 728eaa8

Browse files
committed
docs(react-query): reference for usePrefetchQueries
1 parent cfc4a49 commit 728eaa8

File tree

2 files changed

+45
-1
lines changed

2 files changed

+45
-1
lines changed

docs/config.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -678,6 +678,10 @@
678678
"label": "usePrefetchQuery",
679679
"to": "framework/react/reference/usePrefetchQuery"
680680
},
681+
{
682+
"label": "usePrefetchQueries",
683+
"to": "framework/react/reference/usePrefetchQueries"
684+
},
681685
{
682686
"label": "usePrefetchInfiniteQuery",
683687
"to": "framework/react/reference/usePrefetchInfiniteQuery"
@@ -1158,4 +1162,4 @@
11581162
"Nozzle.io",
11591163
"Uber"
11601164
]
1161-
}
1165+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
id: usePrefetchQueries
3+
title: usePrefetchQueries
4+
---
5+
6+
```tsx
7+
const ids = [1, 2, 3]
8+
9+
const queryOpts = ids.map((id) => ({
10+
queryKey: ['post', id],
11+
queryFn: () => fetchPost(id),
12+
staleTime: Infinity,
13+
}))
14+
15+
// parent component
16+
usePrefetchQueries({
17+
queries: queryOps,
18+
})
19+
20+
// child component with suspense
21+
const results = useSuspenseQueries({
22+
queries: queryOpts,
23+
})
24+
```
25+
26+
**Options**
27+
28+
The `useQueries` hook accepts an options object with a **queries** key whose value is an array with query option objects identical to the [`usePrefetchQuery` hook](../reference/usePrefetchQuery). Remember that some of them are required as below:
29+
30+
- `queryKey: QueryKey`
31+
32+
- **Required**
33+
- The query key to prefetch during render
34+
35+
- `queryFn: (context: QueryFunctionContext) => Promise<TData>`
36+
- **Required, but only if no default query function has been defined** See [Default Query Function](../guides/default-query-function) for more information.
37+
38+
**Returns**
39+
40+
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/useSuspenseQueries).

0 commit comments

Comments
 (0)