docs(react-query): add docs for usePrefetchQuery

Co-authored-by: Gwansik Kim <39869096+gwansikk@users.noreply.github.com>
Co-authored-by: Juhyeok Kang <23312485+kangju2000@users.noreply.github.com>

docs/suspensive.org/src/pages/docs/react-query/_meta.en.json

@@ -10,6 +10,7 @@
   "useSuspenseQuery": { "title": "useSuspenseQuery" },
   "useSuspenseQueries": { "title": "useSuspenseQueries" },
   "useSuspenseInfiniteQuery": { "title": "useSuspenseInfiniteQuery" },
+  "usePrefetchQuery": { "title": "usePrefetchQuery" },
   "queryOptions": { "title": "queryOptions" },
   "infiniteQueryOptions": { "title": "infiniteQueryOptions" },
   "SuspenseQuery": { "title": "<SuspenseQuery/>" },

docs/suspensive.org/src/pages/docs/react-query/_meta.ko.json

@@ -10,6 +10,7 @@
   "useSuspenseQuery": { "title": "useSuspenseQuery" },
   "useSuspenseQueries": { "title": "useSuspenseQueries" },
   "useSuspenseInfiniteQuery": { "title": "useSuspenseInfiniteQuery" },
+  "usePrefetchQuery": { "title": "usePrefetchQuery" },
   "queryOptions": { "title": "queryOptions" },
   "infiniteQueryOptions": { "title": "infiniteQueryOptions" },
   "SuspenseQuery": { "title": "<SuspenseQuery/>" },

docs/suspensive.org/src/pages/docs/react-query/usePrefetchQuery.en.mdx

@@ -0,0 +1,107 @@
+import { Callout, Sandpack } from '@/components'
+
+# usePrefetchQuery
+
+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'
+
+const PostPage = ({ postId }) => {
+  usePrefetchQuery(query.post(postId)) // Prefetch query before suspense boundary
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <Post postId={postId} />
+    </Suspense>
+  )
+}
+
+export const Post = ({ postId }) => {
+  const { data } = useSuspenseQuery(query.post(postId))
+
+  return (
+    <div>
+      <h1>{data.title}</h1>
+      <p>{data.body}</p>
+    </div>
+  )
+}
+
+const query = {
+  post: (postId) =>
+    queryOptions({
+      queryKey: ['posts', postId],
+      queryFn: () => getPost(postId),
+    }),
+}
+```
+
+<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'
+
+export const Example = () => {
+  const [postId, setPostId] = React.useState(1)
+  usePrefetchQuery(query.post(postId))
+
+  return (
+    <div>
+      <button onClick={() => setPostId((prev) => prev - 1)} disabled={postId === 1}>
+        Previous Post
+      </button>
+      <button onClick={() => setPostId((prev) => prev + 1)} disabled={postId === 100}>
+        Next Post
+      </button>
+      <Suspense fallback={<div>Loading...</div>}>
+        <Post postId={postId} />
+      </Suspense>
+    </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))
+
+  return (
+    <div>
+      <h1>{data.title}</h1>
+      <p>{data.body}</p>
+    </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()
+      }
+    })
+}
+```
+
+</Sandpack>

docs/suspensive.org/src/pages/docs/react-query/usePrefetchQuery.ko.mdx

@@ -0,0 +1,107 @@
+import { Callout, Sandpack } from '@/components'
+
+# usePrefetchQuery
+
+usePrefetchQuery는 아무것도 반환하지 않습니다. useSuspenseQuery를 사용하는 컴포넌트를 감싸는 suspense 전에 렌더링 중에 prefetch를 발생시키는 데에 사용할 수 있습니다.
+
+```jsx /usePrefetchQuery/
+import { usePrefetchQuery, queryOptions } from '@suspensive/react-query'
+
+const PostPage = ({ postId }) => {
+  usePrefetchQuery(query.post(postId)) // suspense경계 전에 prefetch를 발생 시키는 데에 사용합니다
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <Post postId={postId} />
+    </Suspense>
+  )
+}
+
+export const Post = ({ postId }) => {
+  const { data } = useSuspenseQuery(query.post(postId))
+
+  return (
+    <div>
+      <h1>{data.title}</h1>
+      <p>{data.body}</p>
+    </div>
+  )
+}
+
+const query = {
+  post: (postId) =>
+    queryOptions({
+      queryKey: ['posts', postId],
+      queryFn: () => getPost(postId),
+    }),
+}
+```
+
+<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'
+
+export const Example = () => {
+  const [postId, setPostId] = React.useState(1)
+  usePrefetchQuery(query.post(postId))
+
+  return (
+    <div>
+      <button onClick={() => setPostId((prev) => prev - 1)} disabled={postId === 1}>
+        Previous Post
+      </button>
+      <button onClick={() => setPostId((prev) => prev + 1)} disabled={postId === 100}>
+        Next Post
+      </button>
+      <Suspense fallback={<div>Loading...</div>}>
+        <Post postId={postId} />
+      </Suspense>
+    </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))
+
+  return (
+    <div>
+      <h1>{data.title}</h1>
+      <p>{data.body}</p>
+    </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()
+      }
+    })
+}
+```
+
+</Sandpack>