docs(suspensive.org): add sandpack examples to queryOptions (#1010)

# Overview

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

Add sandpack examples to queryOptions.

## 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.

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

@@ -1,3 +1,5 @@
+import { Sandpack } from '@/components'
+
 # queryOptions
 
 Tkdodo, The maintainer of TanStack Query explains well why this interface is needed in [video explaining queryOptions in TanStack Query v5](https://youtu.be/bhE3wuB_TuA?feature=shared&t=1697).
@@ -44,3 +46,63 @@ queryClient.resetQueries(postQueryOptions(1))
 queryClient.cancelQueries(postQueryOptions(1))
 
 ```
+
+<Sandpack>
+
+```tsx Example.tsx active
+import { Suspense } from '@suspensive/react'
+import { queryOptions, SuspenseQuery } from '@suspensive/react-query'
+import { useQueryClient } from '@tanstack/react-query'
+import { getPost } from './api'
+
+const postQueryOptions = (postId: number) =>
+  queryOptions({
+    queryKey: ['posts', postId],
+    queryFn: () => getPost(postId),
+  })
+
+export const Example = () => {
+  const queryClient = useQueryClient()
+
+  return (
+    <div>
+      <button onClick={() => queryClient.resetQueries(postQueryOptions(1))}>Reset Query</button>
+      <Suspense fallback={<div>Loading...</div>}>
+        <SuspenseQuery {...postQueryOptions(1)}>
+          {({ data }) => {
+            return (
+              <div>
+                <h1>{data.title}</h1>
+                <p>{data.body}</p>
+              </div>
+            )
+          }}
+        </SuspenseQuery>
+      </Suspense>
+    </div>
+  )
+}
+```
+
+```tsx api.ts
+type Post = {
+  userId: number
+  id: number
+  title: string
+  body: string
+}
+
+export const getPost = async (id: number): Promise<Post> => {
+  const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)
+
+  if (!response.ok) {
+    throw new Error('An error occurred')
+  }
+
+  const data = await response.json()
+
+  return data
+}
+```
+
+</Sandpack>

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

@@ -1,3 +1,5 @@
+import { Sandpack } from '@/components'
+
 # queryOptions
 
 TanStack Query의 메인테이너 [Tkdodo의 TanStack Query v5의 queryOptions 설명 영상](https://youtu.be/bhE3wuB_TuA?feature=shared&t=1697)에서 이 interface가 필요한 이유를 잘 설명되어 있습니다.
@@ -44,3 +46,63 @@ queryClient.resetQueries(postQueryOptions(1))
 queryClient.cancelQueries(postQueryOptions(1))
 
 ```
+
+<Sandpack>
+
+```tsx Example.tsx active
+import { Suspense } from '@suspensive/react'
+import { queryOptions, SuspenseQuery } from '@suspensive/react-query'
+import { useQueryClient } from '@tanstack/react-query'
+import { getPost } from './api'
+
+const postQueryOptions = (postId: number) =>
+  queryOptions({
+    queryKey: ['posts', postId],
+    queryFn: () => getPost(postId),
+  })
+
+export const Example = () => {
+  const queryClient = useQueryClient()
+
+  return (
+    <div>
+      <button onClick={() => queryClient.resetQueries(postQueryOptions(1))}>Reset Query</button>
+      <Suspense fallback={<div>Loading...</div>}>
+        <SuspenseQuery {...postQueryOptions(1)}>
+          {({ data }) => {
+            return (
+              <div>
+                <h1>{data.title}</h1>
+                <p>{data.body}</p>
+              </div>
+            )
+          }}
+        </SuspenseQuery>
+      </Suspense>
+    </div>
+  )
+}
+```
+
+```tsx api.ts
+type Post = {
+  userId: number
+  id: number
+  title: string
+  body: string
+}
+
+export const getPost = async (id: number): Promise<Post> => {
+  const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)
+
+  if (!response.ok) {
+    throw new Error('An error occurred')
+  }
+
+  const data = await response.json()
+
+  return data
+}
+```
+
+</Sandpack>