Skip to content

Commit 710c06b

Browse files
committed
docs(react-query): reference for usePrefetchQueries
1 parent 4175f2e commit 710c06b

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
@@ -682,6 +682,10 @@
682682
"label": "usePrefetchQuery",
683683
"to": "framework/react/reference/usePrefetchQuery"
684684
},
685+
{
686+
"label": "usePrefetchQueries",
687+
"to": "framework/react/reference/usePrefetchQueries"
688+
},
685689
{
686690
"label": "usePrefetchInfiniteQuery",
687691
"to": "framework/react/reference/usePrefetchInfiniteQuery"
@@ -1162,4 +1166,4 @@
11621166
"Nozzle.io",
11631167
"Uber"
11641168
]
1165-
}
1169+
}
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)