Skip to content

Commit a2ea754

Browse files
authoredOct 20, 2024··
docs(react-query): fix prefetch with suspense example (#8193)
* docs: react prefetch with suspense example * remove notifyOnChangeProps from usePrefetchQuery
1 parent 1980a11 commit a2ea754

File tree

1 file changed

+10
-19
lines changed

1 file changed

+10
-19
lines changed
 

‎docs/framework/react/guides/prefetching.md

+10-19
Original file line numberDiff line numberDiff line change
@@ -201,35 +201,26 @@ If you want to prefetch together with Suspense, you will have to do things a bit
201201
You can now use `useSuspenseQuery` in the component that actually needs the data. You _might_ want to wrap this later component in its own `<Suspense>` boundary so the "secondary" query we are prefetching does not block rendering of the "primary" data.
202202

203203
```tsx
204-
function App() {
204+
function ArticleLayout({ id }) {
205205
usePrefetchQuery({
206-
queryKey: ['articles'],
207-
queryFn: (...args) => {
208-
return getArticles(...args)
209-
},
206+
queryKey: ['article-comments', id],
207+
queryFn: getArticleCommentsById,
210208
})
211209

212210
return (
213-
<Suspense fallback="Loading articles...">
214-
<Articles />
211+
<Suspense fallback="Loading article">
212+
<Article id={id} />
215213
</Suspense>
216214
)
217215
}
218216

219-
function Articles() {
220-
const { data: articles } = useSuspenseQuery({
221-
queryKey: ['articles'],
222-
queryFn: (...args) => {
223-
return getArticles(...args)
224-
},
217+
function Article({ id }) {
218+
const { data: articleData, isPending } = useSuspenseQuery({
219+
queryKey: ['article', id],
220+
queryFn: getArticleById,
225221
})
226222

227-
return articles.map((article) => (
228-
<div key={articleData.id}>
229-
<ArticleHeader article={article} />
230-
<ArticleBody article={article} />
231-
</div>
232-
))
223+
...
233224
}
234225
```
235226

0 commit comments

Comments
 (0)
Please sign in to comment.