Skip to content

Commit

Permalink
docs(react-query): fix prefetch with suspense example (#8193)
Browse files Browse the repository at this point in the history
* docs: react prefetch with suspense example

* remove notifyOnChangeProps from usePrefetchQuery
  • Loading branch information
qiushiyan authored Oct 20, 2024
1 parent 1980a11 commit a2ea754
Showing 1 changed file with 10 additions and 19 deletions.
29 changes: 10 additions & 19 deletions docs/framework/react/guides/prefetching.md
Original file line number Diff line number Diff line change
Expand Up @@ -201,35 +201,26 @@ If you want to prefetch together with Suspense, you will have to do things a bit
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.

```tsx
function App() {
function ArticleLayout({ id }) {
usePrefetchQuery({
queryKey: ['articles'],
queryFn: (...args) => {
return getArticles(...args)
},
queryKey: ['article-comments', id],
queryFn: getArticleCommentsById,
})

return (
<Suspense fallback="Loading articles...">
<Articles />
<Suspense fallback="Loading article">
<Article id={id} />
</Suspense>
)
}

function Articles() {
const { data: articles } = useSuspenseQuery({
queryKey: ['articles'],
queryFn: (...args) => {
return getArticles(...args)
},
function Article({ id }) {
const { data: articleData, isPending } = useSuspenseQuery({
queryKey: ['article', id],
queryFn: getArticleById,
})

return articles.map((article) => (
<div key={articleData.id}>
<ArticleHeader article={article} />
<ArticleBody article={article} />
</div>
))
...
}
```

Expand Down

0 comments on commit a2ea754

Please sign in to comment.