docs(react-query): add docs for <PrefetchInfiniteQuery/>

Co-authored-by: Gwansik Kim <[email protected]> Co-authored-by: Juhyeok Kang <[email protected]>
toss · Oct 9, 2024 · 8f26227 · 8f26227
1 parent cc0b196
commit 8f26227
Show file tree

Hide file tree

Showing 8 changed files with 135 additions and 73 deletions.
diff --git a/docs/suspensive.org/src/pages/docs/react-query/PrefetchInfiniteQuery.en.mdx b/docs/suspensive.org/src/pages/docs/react-query/PrefetchInfiniteQuery.en.mdx
@@ -0,0 +1,41 @@
+import { Callout, Sandpack } from '@/components'
+
+# PrefetchInfiniteQuery
+
+A component that allows you to use usePrefetchInfiniteQuery in JSX, avoiding the limitations of React hooks.
+
+```jsx /PrefetchInfiniteQuery/
+import { PrefetchInfiniteQuery, useSuspenseQuery } from '@suspensive/react-query'
+import { InView } from '@suspensive/react-dom'
+
+const PostsPage = () => {
+  const { data: posts } = useSuspenseQuery({
+    queryKey: ['posts'],
+    queryFn: () => getPosts(),
+  })
+
+  return posts.map((post) => (
+    <InView>
+      {({ ref, isInView }) => (
+        <>
+          {isInView ? (
+            // 🚫 We can not invoke usePrefetchInfiniteQuery like below because of React Hook rules
+            // usePrefetchInfiniteQuery({
+            //   queryKey: ['posts', post.id, 'comments'],
+            //   queryFn: () => getPostComments(post.id),
+            // })
+
+            // ✅ We can invoke usePrefetchInfiniteQuery for each post comments query before entering Post Comments page
+            <PrefetchInfiniteQuery queryKey={['posts', post.id, 'comments']} queryFn={() => getPostComments(post.id)} />
+          ) : null}
+          <div ref={ref}>
+            <h2>{post.title}</h2>
+            <p>{post.description}</p>
+            <Link to={`/posts/${post.id}/comments`}>See comments</Link>
+          </div>
+        </>
+      )}
+    </InView>
+  ))
+}
+```
diff --git a/docs/suspensive.org/src/pages/docs/react-query/PrefetchInfiniteQuery.ko.mdx b/docs/suspensive.org/src/pages/docs/react-query/PrefetchInfiniteQuery.ko.mdx
@@ -0,0 +1,41 @@
+import { Callout, Sandpack } from '@/components'
+
+# PrefetchInfiniteQuery
+
+React hook의 제약을 피해 JSX상에서도 usePrefetchInfiniteQuery를 사용할 수 있게 하는 컴포넌트입니다.
+
+```jsx /PrefetchInfiniteQuery/
+import { PrefetchInfiniteQuery, useSuspenseQuery } from '@suspensive/react-query'
+import { InView } from '@suspensive/react-dom'
+
+const PostsPage = () => {
+  const { data: posts } = useSuspenseQuery({
+    queryKey: ['posts'],
+    queryFn: () => getPosts(),
+  })
+
+  return posts.map((post) => (
+    <InView>
+      {({ ref, isInView }) => (
+        <>
+          {isInView ? (
+            // 🚫 React hook의 제약으로 usePrefetchInfiniteQuery를 사용하지 못합니다
+            // usePrefetchInfiniteQuery({
+            //   queryKey: ['posts', post.id, 'comments'],
+            //   queryFn: () => getPostComments(post.id),
+            // })
+
+            // ✅ Post Comments 페이지에 들어가기 전에 각각의 post comments query에 대해 usePrefetchInfiniteQuery를 호출할 수 있습니다.
+            <PrefetchInfiniteQuery queryKey={['posts', post.id, 'comments']} queryFn={() => getPostComments(post.id)} />
+          ) : null}
+          <div ref={ref}>
+            <h2>{post.title}</h2>
+            <p>{post.description}</p>
+            <Link to={`/posts/${post.id}/comments`}>See comments</Link>
+          </div>
+        </>
+      )}
+    </InView>
+  ))
+}
+```
diff --git a/docs/suspensive.org/src/pages/docs/react-query/PrefetchQuery.en.mdx b/docs/suspensive.org/src/pages/docs/react-query/PrefetchQuery.en.mdx
@@ -5,48 +5,37 @@ import { Callout, Sandpack } from '@/components'
 A component that allows you to use usePrefetchQuery in JSX, avoiding the limitations of React hooks.
 
 ```jsx /PrefetchQuery/
-import { PrefetchQuery, useSuspenseQuery, queryOptions } from '@suspensive/react-query'
+import { PrefetchQuery, useSuspenseQuery } from '@suspensive/react-query'
 import { InView } from '@suspensive/react-dom'
-import { useQuery } from '@tanstack/react-query'
 
 const PostsPage = () => {
-  const { data: posts } = useSuspenseQuery(query.posts())
+  const { data: posts } = useSuspenseQuery({
+    queryKey: ['posts'],
+    queryFn: () => getPosts(),
+  })
 
-  return posts.map(({ id, title, description }) => (
+  return posts.map((post) => (
     <InView>
-      {({ ref, isInView }) => {
-        return (
-          <>
-            {isInView ? (
-              // 🚫 We can not invoke usePrefetchQuery like below because of React Hook rules
-              // usePrefetchQuery(query.post(post.id))
+      {({ ref, isInView }) => (
+        <>
+          {isInView ? (
+            // 🚫 We can not invoke usePrefetchQuery like below because of React Hook rules
+            // usePrefetchQuery({
+            //   queryKey: ['posts', post.id, 'comments'],
+            //   queryFn: () => getPostComments(post.id),
+            // })
 
-              // ✅ We can invoke usePrefetch for each post query before entering Post page
-              <PrefetchQuery {...query.post(id)} />
-            ) : null}
-            <Link to={`/post/${id}`}>
-              <div ref={ref}>
-                <h2>{title}</h2>
-                <p>{description}</p>
-              </div>
-            </Link>
-          </>
-        )
-      }}
+            // ✅ We can invoke usePrefetchQuery for each post comments query before entering Post Comments page
+            <PrefetchQuery queryKey={['posts', post.id, 'comments']} queryFn={() => getPostComments(post.id)} />
+          ) : null}
+          <div ref={ref}>
+            <h2>{post.title}</h2>
+            <p>{post.description}</p>
+            <Link to={`/posts/${post.id}/comments`}>See comments</Link>
+          </div>
+        </>
+      )}
     </InView>
   ))
 }
-
-const query = {
-  posts: () =>
-    queryOptions({
-      queryKey: ['posts'],
-      queryFn: () => getPosts(),
-    }),
-  post: (postId) =>
-    queryOptions({
-      queryKey: ['posts', postId],
-      queryFn: () => getPost(postId),
-    }),
-}
 ```
diff --git a/docs/suspensive.org/src/pages/docs/react-query/PrefetchQuery.ko.mdx b/docs/suspensive.org/src/pages/docs/react-query/PrefetchQuery.ko.mdx
@@ -5,48 +5,37 @@ import { Callout, Sandpack } from '@/components'
 React hook의 제약을 피해 JSX상에서도 usePrefetchQuery를 사용할 수 있게 하는 컴포넌트입니다.
 
 ```jsx /PrefetchQuery/
-import { PrefetchQuery, useSuspenseQuery, queryOptions } from '@suspensive/react-query'
+import { PrefetchQuery, useSuspenseQuery } from '@suspensive/react-query'
 import { InView } from '@suspensive/react-dom'
-import { useQuery } from '@tanstack/react-query'
 
 const PostsPage = () => {
-  const { data: posts } = useSuspenseQuery(query.posts())
+  const { data: posts } = useSuspenseQuery({
+    queryKey: ['posts'],
+    queryFn: () => getPosts(),
+  })
 
-  return posts.map(({ id, title, description }) => (
+  return posts.map((post) => (
     <InView>
-      {({ ref, isInView }) => {
-        return (
-          <>
-            {isInView ? (
-              // 🚫 React hook의 제약으로 usePrefetchQuery를 사용하지 못합니다
-              // usePrefetchQuery(query.post(post.id))
+      {({ ref, isInView }) => (
+        <>
+          {isInView ? (
+            // 🚫 React hook의 제약으로 usePrefetchQuery를 사용하지 못합니다
+            // usePrefetchQuery({
+            //   queryKey: ['posts', post.id, 'comments'],
+            //   queryFn: () => getPostComments(post.id),
+            // })
 
-              // ✅ Post 페이지에 들어가기 전에 각각의 post query에 대해 usePrefetch를 호출할 수 있습니다.
-              <PrefetchQuery {...query.post(id)} />
-            ) : null}
-            <Link to={`/post/${id}`}>
-              <div ref={ref}>
-                <h2>{title}</h2>
-                <p>{description}</p>
-              </div>
-            </Link>
-          </>
-        )
-      }}
+            // ✅ Post Comments 페이지에 들어가기 전에 각각의 post comments query에 대해 usePrefetchQuery를 호출할 수 있습니다.
+            <PrefetchQuery queryKey={['posts', post.id, 'comments']} queryFn={() => getPostComments(post.id)} />
+          ) : null}
+          <div ref={ref}>
+            <h2>{post.title}</h2>
+            <p>{post.description}</p>
+            <Link to={`/posts/${post.id}/comments`}>See comments</Link>
+          </div>
+        </>
+      )}
     </InView>
   ))
 }
-
-const query = {
-  posts: () =>
-    queryOptions({
-      queryKey: ['posts'],
-      queryFn: () => getPosts(),
-    }),
-  post: (postId) =>
-    queryOptions({
-      queryKey: ['posts', postId],
-      queryFn: () => getPost(postId),
-    }),
-}
 ```
diff --git a/docs/suspensive.org/src/pages/docs/react-query/_meta.en.json b/docs/suspensive.org/src/pages/docs/react-query/_meta.en.json
@@ -18,5 +18,6 @@
   "SuspenseQueries": { "title": "<SuspenseQueries/>" },
   "SuspenseInfiniteQuery": { "title": "<SuspenseInfiniteQuery/>" },
   "PrefetchQuery": { "title": "<PrefetchQuery/>" },
+  "PrefetchInfiniteQuery": { "title": "<PrefetchInfiniteQuery/>" },
   "QueryErrorBoundary": { "title": "<QueryErrorBoundary/>" }
 }
diff --git a/docs/suspensive.org/src/pages/docs/react-query/_meta.ko.json b/docs/suspensive.org/src/pages/docs/react-query/_meta.ko.json
@@ -18,5 +18,6 @@
   "SuspenseQueries": { "title": "<SuspenseQueries/>" },
   "SuspenseInfiniteQuery": { "title": "<SuspenseInfiniteQuery/>" },
   "PrefetchQuery": { "title": "<PrefetchQuery/>" },
+  "PrefetchInfiniteQuery": { "title": "<PrefetchInfiniteQuery/>" },
   "QueryErrorBoundary": { "title": "<QueryErrorBoundary/>" }
 }
diff --git a/docs/suspensive.org/src/pages/docs/react-query/usePrefetchInfiniteQuery.en.mdx b/docs/suspensive.org/src/pages/docs/react-query/usePrefetchInfiniteQuery.en.mdx
@@ -15,7 +15,7 @@ const PostsPage = ({ postId }) => {
 
   return (
     <Suspense fallback={<div>Loading...</div>}>
-      <Posts postId={postId} />
+      <Posts />
     </Suspense>
   )
 }

diff --git a/docs/suspensive.org/src/pages/docs/react-query/usePrefetchInfiniteQuery.ko.mdx b/docs/suspensive.org/src/pages/docs/react-query/usePrefetchInfiniteQuery.ko.mdx
@@ -11,11 +11,11 @@ const PostsPage = ({ postId }) => {
   usePrefetchInfiniteQuery({
     queryKey: ['posts'],
     queryFn: () => getPosts(),
-  }) // suspense경계 전에 prefetch를 발생 시키는 데에 사용합니다
+  }) // suspense 경계 전에 prefetch를 발생 시키는 데에 사용합니다
 
   return (
     <Suspense fallback={<div>Loading...</div>}>
-      <Posts postId={postId} />
+      <Posts />
     </Suspense>
   )
 }