docs(react-query): add docs for usePrefetchInfiniteQuery (#1299)

# Overview  I added docs for usePrefetchInfiniteQuery and I added @gwansikk @kangju2000 as co-author ## PR Checklist - [x] I did below actions if need 1. I read the [Contributing Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md) 2. I added documents and tests. Co-authored-by: Gwansik Kim <[email protected]> Co-authored-by: Juhyeok Kang <[email protected]>
toss · Oct 9, 2024 · b23447f · b23447f
1 parent 1848a2e
commit b23447f
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 106 deletions.
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
@@ -7,12 +7,13 @@
     "type": "separator",
     "title": "API Reference"
   },
+  "queryOptions": { "title": "queryOptions" },
+  "infiniteQueryOptions": { "title": "infiniteQueryOptions" },
   "useSuspenseQuery": { "title": "useSuspenseQuery" },
   "useSuspenseQueries": { "title": "useSuspenseQueries" },
   "useSuspenseInfiniteQuery": { "title": "useSuspenseInfiniteQuery" },
   "usePrefetchQuery": { "title": "usePrefetchQuery" },
-  "queryOptions": { "title": "queryOptions" },
-  "infiniteQueryOptions": { "title": "infiniteQueryOptions" },
+  "usePrefetchInfiniteQuery": { "title": "usePrefetchInfiniteQuery" },
   "SuspenseQuery": { "title": "<SuspenseQuery/>" },
   "SuspenseQueries": { "title": "<SuspenseQueries/>" },
   "SuspenseInfiniteQuery": { "title": "<SuspenseInfiniteQuery/>" },

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
@@ -7,12 +7,13 @@
     "type": "separator",
     "title": "API 문서"
   },
+  "queryOptions": { "title": "queryOptions" },
+  "infiniteQueryOptions": { "title": "infiniteQueryOptions" },
   "useSuspenseQuery": { "title": "useSuspenseQuery" },
   "useSuspenseQueries": { "title": "useSuspenseQueries" },
   "useSuspenseInfiniteQuery": { "title": "useSuspenseInfiniteQuery" },
   "usePrefetchQuery": { "title": "usePrefetchQuery" },
-  "queryOptions": { "title": "queryOptions" },
-  "infiniteQueryOptions": { "title": "infiniteQueryOptions" },
+  "usePrefetchInfiniteQuery": { "title": "usePrefetchInfiniteQuery" },
   "SuspenseQuery": { "title": "<SuspenseQuery/>" },
   "SuspenseQueries": { "title": "<SuspenseQueries/>" },
   "SuspenseInfiniteQuery": { "title": "<SuspenseInfiniteQuery/>" },

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
@@ -0,0 +1,31 @@
+import { Callout, Sandpack } from '@/components'
+
+# usePrefetchInfiniteQuery
+
+The usePrefetchInfiniteQuery 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 useSuspenseInfiniteQuery.
+
+```jsx /usePrefetchInfiniteQuery/
+import { usePrefetchInfiniteQuery, useSuspenseInfiniteQuery } from '@suspensive/react-query'
+
+const PostsPage = ({ postId }) => {
+  usePrefetchInfiniteQuery({
+    queryKey: ['posts'],
+    queryFn: () => getPosts(),
+  }) // Prefetch query before suspense boundary
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <Posts postId={postId} />
+    </Suspense>
+  )
+}
+
+export const Posts = () => {
+  const postsInifiniteQuery = useSuspenseInfiniteQuery({
+    queryKey: ['posts'],
+    queryFn: () => getPosts(),
+  })
+
+  return <>...</>
+}
+```
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
@@ -0,0 +1,31 @@
+import { Callout, Sandpack } from '@/components'
+
+# usePrefetchInfiniteQuery
+
+usePrefetchInfiniteQuery는 아무것도 반환하지 않으며, useSuspenseInfiniteQuery를 사용하는 컴포넌트를 래핑하는 suspense boundary가 렌더 되기전에 prefetch를 발생시키는 데에 사용합니다.
+
+```jsx /usePrefetchInfiniteQuery/
+import { usePrefetchInfiniteQuery, useSuspenseInfiniteQuery } from '@suspensive/react-query'
+
+const PostsPage = ({ postId }) => {
+  usePrefetchInfiniteQuery({
+    queryKey: ['posts'],
+    queryFn: () => getPosts(),
+  }) // suspense경계 전에 prefetch를 발생 시키는 데에 사용합니다
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <Posts postId={postId} />
+    </Suspense>
+  )
+}
+
+export const Posts = () => {
+  const postsInifiniteQuery = useSuspenseInfiniteQuery({
+    queryKey: ['posts'],
+    queryFn: () => getPosts(),
+  })
+
+  return <>...</>
+}
+```
diff --git a/docs/suspensive.org/src/pages/docs/react-query/usePrefetchQuery.en.mdx b/docs/suspensive.org/src/pages/docs/react-query/usePrefetchQuery.en.mdx
@@ -5,10 +5,13 @@ import { Callout, Sandpack } from '@/components'
 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.
 
 ```jsx /usePrefetchQuery/
-import { usePrefetchQuery, queryOptions } from '@suspensive/react-query'
+import { usePrefetchQuery, useSuspenseQuery } from '@suspensive/react-query'
 
 const PostPage = ({ postId }) => {
-  usePrefetchQuery(query.post(postId)) // Prefetch query before suspense boundary
+  usePrefetchQuery({
+    queryKey: ['posts', postId],
+    queryFn: () => getPost(postId),
+  }) // Prefetch query before suspense boundary
 
   return (
     <Suspense fallback={<div>Loading...</div>}>
@@ -18,37 +21,28 @@ const PostPage = ({ postId }) => {
 }
 
 export const Post = ({ postId }) => {
-  const { data } = useSuspenseQuery(query.post(postId))
+  const { data } = useSuspenseQuery({
+    queryKey: ['posts', postId],
+    queryFn: () => getPost(postId),
+  })
 
-  return (
-    <div>
-      <h1>{data.title}</h1>
-      <p>{data.body}</p>
-    </div>
-  )
-}
-
-const query = {
-  post: (postId) =>
-    queryOptions({
-      queryKey: ['posts', postId],
-      queryFn: () => getPost(postId),
-    }),
+  return <>...</>
 }
 ```
 
 <Sandpack>
 
 ```tsx Example.tsx active
 import { Suspense } from '@suspensive/react'
-import { usePrefetchQuery } from '@suspensive/react-query'
-import React from 'react'
-import { Post } from './Post'
-import { query } from './query'
+import { usePrefetchQuery, useSuspenseQuery } from '@suspensive/react-query'
+import { useState } from 'react'
 
 export const Example = () => {
-  const [postId, setPostId] = React.useState(1)
-  usePrefetchQuery(query.post(postId))
+  const [postId, setPostId] = useState(1)
+  usePrefetchQuery({
+    queryKey: ['posts', postId],
+    queryFn:() => getPost(postId),
+  })
 
   return (
     <div>
@@ -64,14 +58,12 @@ export const Example = () => {
     </div>
   )
 }
-```
 
-```tsx Post.tsx
-import { useSuspenseQuery } from '@suspensive/react-query'
-import { query } from './query'
-
-export const Post = ({ postId }: { postId: number }) => {
-  const { data } = useSuspenseQuery(query.post(postId))
+const Post = ({ postId }: { postId: number }) => {
+  const { data } = useSuspenseQuery({
+    queryKey: ['posts', postId],
+    queryFn:() => getPost(postId),
+  })
 
   return (
     <div>
@@ -80,28 +72,11 @@ export const Post = ({ postId }: { postId: number }) => {
     </div>
   )
 }
-```
 
-```tsx /query.ts
-import { queryOptions } from '@suspensive/react-query'
-
-export const query = {
-  post: (postId: number) =>
-    queryOptions({
-      queryKey: ['posts', postId],
-      queryFn: async (): Promise<{
-        id: number
-        title: string
-        body: string
-      }> => {
-        const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`)
-        if (!response.ok) {
-          throw new Error('An error occurred')
-        }
-        return await response.json()
-      }
-    })
-}
+const getPost = (postId: number) =>
+  fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`).then<{ id: number; title: string; body: string }>(
+    (res) => res.json()
+  )
 ```
 
 </Sandpack>
diff --git a/docs/suspensive.org/src/pages/docs/react-query/usePrefetchQuery.ko.mdx b/docs/suspensive.org/src/pages/docs/react-query/usePrefetchQuery.ko.mdx
@@ -5,10 +5,13 @@ import { Callout, Sandpack } from '@/components'
 usePrefetchQuery는 아무것도 반환하지 않으며, useSuspenseQuery를 사용하는 컴포넌트를 래핑하는 suspense boundary가 렌더 되기전에 prefetch를 발생시키는 데에 사용합니다.
 
 ```jsx /usePrefetchQuery/
-import { usePrefetchQuery, queryOptions } from '@suspensive/react-query'
+import { usePrefetchQuery, useSuspenseQuery } from '@suspensive/react-query'
 
 const PostPage = ({ postId }) => {
-  usePrefetchQuery(query.post(postId)) // suspense경계 전에 prefetch를 발생 시키는 데에 사용합니다
+  usePrefetchQuery({
+    queryKey: ['posts', postId],
+    queryFn: () => getPost(postId),
+  }) // suspense경계 전에 prefetch를 발생 시키는 데에 사용합니다
 
   return (
     <Suspense fallback={<div>Loading...</div>}>
@@ -18,37 +21,28 @@ const PostPage = ({ postId }) => {
 }
 
 export const Post = ({ postId }) => {
-  const { data } = useSuspenseQuery(query.post(postId))
+  const { data } = useSuspenseQuery({
+    queryKey: ['posts', postId],
+    queryFn: () => getPost(postId),
+  })
 
-  return (
-    <div>
-      <h1>{data.title}</h1>
-      <p>{data.body}</p>
-    </div>
-  )
-}
-
-const query = {
-  post: (postId) =>
-    queryOptions({
-      queryKey: ['posts', postId],
-      queryFn: () => getPost(postId),
-    }),
+  return <>...</>
 }
 ```
 
 <Sandpack>
 
 ```tsx Example.tsx active
 import { Suspense } from '@suspensive/react'
-import { usePrefetchQuery } from '@suspensive/react-query'
-import React from 'react'
-import { Post } from './Post'
-import { query } from './query'
+import { usePrefetchQuery, useSuspenseQuery } from '@suspensive/react-query'
+import { useState } from 'react'
 
 export const Example = () => {
-  const [postId, setPostId] = React.useState(1)
-  usePrefetchQuery(query.post(postId))
+  const [postId, setPostId] = useState(1)
+  usePrefetchQuery({
+    queryKey: ['posts', postId],
+    queryFn:() => getPost(postId),
+  }) // suspense경계 전에 prefetch를 발생 시키는 데에 사용합니다
 
   return (
     <div>
@@ -64,14 +58,12 @@ export const Example = () => {
     </div>
   )
 }
-```
 
-```tsx Post.tsx
-import { useSuspenseQuery } from '@suspensive/react-query'
-import { query } from './query'
-
-export const Post = ({ postId }: { postId: number }) => {
-  const { data } = useSuspenseQuery(query.post(postId))
+const Post = ({ postId }: { postId: number }) => {
+  const { data } = useSuspenseQuery({
+    queryKey: ['posts', postId],
+    queryFn:() => getPost(postId),
+  })
 
   return (
     <div>
@@ -80,28 +72,11 @@ export const Post = ({ postId }: { postId: number }) => {
     </div>
   )
 }
-```
 
-```tsx /query.ts
-import { queryOptions } from '@suspensive/react-query'
-
-export const query = {
-  post: (postId: number) =>
-    queryOptions({
-      queryKey: ['posts', postId],
-      queryFn: async (): Promise<{
-        id: number
-        title: string
-        body: string
-      }> => {
-        const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`)
-        if (!response.ok) {
-          throw new Error('An error occurred')
-        }
-        return await response.json()
-      }
-    })
-}
+const getPost = (postId: number) =>
+  fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`).then<{ id: number; title: string; body: string }>(
+    (res) => res.json()
+  )
 ```
 
 </Sandpack>