docs(react-query): add docs for PrefetchQuery (#1297)

related with #1253

# Overview

<!--
    A clear and concise description of what this pr is about.
 -->

I added docs for PrefetchQuery
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]>
Co-authored-by: Gwansik Kim <[email protected]>

Author: 3 people

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

@@ -0,0 +1,52 @@
+import { Callout, Sandpack } from '@/components'
+
+# PrefetchQuery
+
+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 { InView } from '@suspensive/react-dom'
+import { useQuery } from '@tanstack/react-query'
+
+const PostsPage = () => {
+  const { data: posts } = useSuspenseQuery(query.posts())
+
+  return posts.map(({ id, title, description }) => (
+    <InView>
+      {({ ref, isInView }) => {
+        return (
+          <>
+            {isInView ? (
+              // 🚫 We can not invoke usePrefetchQuery like below because of React Hook rules
+              // usePrefetchQuery(query.post(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>
+          </>
+        )
+      }}
+    </InView>
+  ))
+}
+
+const query = {
+  posts: () =>
+    queryOptions({
+      queryKey: ['posts'],
+      queryFn: () => getPosts(),
+    }),
+  post: (postId) =>
+    queryOptions({
+      queryKey: ['posts', postId],
+      queryFn: () => getPost(postId),
+    }),
+}
+```

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

@@ -0,0 +1,52 @@
+import { Callout, Sandpack } from '@/components'
+
+# PrefetchQuery
+
+React hook의 제약을 피해 JSX상에서도 usePrefetchQuery를 사용할 수 있게 하는 컴포넌트입니다.
+
+```jsx /PrefetchQuery/
+import { PrefetchQuery, useSuspenseQuery, queryOptions } from '@suspensive/react-query'
+import { InView } from '@suspensive/react-dom'
+import { useQuery } from '@tanstack/react-query'
+
+const PostsPage = () => {
+  const { data: posts } = useSuspenseQuery(query.posts())
+
+  return posts.map(({ id, title, description }) => (
+    <InView>
+      {({ ref, isInView }) => {
+        return (
+          <>
+            {isInView ? (
+              // 🚫 React hook의 제약으로 usePrefetchQuery를 사용하지 못합니다
+              // usePrefetchQuery(query.post(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>
+          </>
+        )
+      }}
+    </InView>
+  ))
+}
+
+const query = {
+  posts: () =>
+    queryOptions({
+      queryKey: ['posts'],
+      queryFn: () => getPosts(),
+    }),
+  post: (postId) =>
+    queryOptions({
+      queryKey: ['posts', postId],
+      queryFn: () => getPost(postId),
+    }),
+}
+```

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

@@ -16,5 +16,6 @@
   "SuspenseQuery": { "title": "<SuspenseQuery/>" },
   "SuspenseQueries": { "title": "<SuspenseQueries/>" },
   "SuspenseInfiniteQuery": { "title": "<SuspenseInfiniteQuery/>" },
+  "PrefetchQuery": { "title": "<PrefetchQuery/>" },
   "QueryErrorBoundary": { "title": "<QueryErrorBoundary/>" }
 }

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

@@ -16,5 +16,6 @@
   "SuspenseQuery": { "title": "<SuspenseQuery/>" },
   "SuspenseQueries": { "title": "<SuspenseQueries/>" },
   "SuspenseInfiniteQuery": { "title": "<SuspenseInfiniteQuery/>" },
+  "PrefetchQuery": { "title": "<PrefetchQuery/>" },
   "QueryErrorBoundary": { "title": "<QueryErrorBoundary/>" }
 }