From a2ea754e5449c465eef14182b41109e33fa93a4e Mon Sep 17 00:00:00 2001
From: Qiushi Yan <qiushi.yann@gmail.com>
Date: Sun, 20 Oct 2024 12:10:59 -0500
Subject: [PATCH] docs(react-query): fix prefetch with suspense example (#8193)

* docs: react prefetch with suspense example

* remove notifyOnChangeProps from usePrefetchQuery
---
 docs/framework/react/guides/prefetching.md | 29 ++++++++--------------
 1 file changed, 10 insertions(+), 19 deletions(-)

diff --git a/docs/framework/react/guides/prefetching.md b/docs/framework/react/guides/prefetching.md
index 53b2e4e8a8..f5965c1bde 100644
--- a/docs/framework/react/guides/prefetching.md
+++ b/docs/framework/react/guides/prefetching.md
@@ -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>
-  ))
+  ...
 }
 ```