diff --git a/docs/framework/solid/guides/suspense.md b/docs/framework/solid/guides/suspense.md
index 31924d1924..20d7a77bcc 100644
--- a/docs/framework/solid/guides/suspense.md
+++ b/docs/framework/solid/guides/suspense.md
@@ -16,25 +16,24 @@ import { Suspense } from 'solid-js'
 
 You can use async `suspense` function that is provided by `solid-query`.
 
-```vue
-<script>
-import { defineComponent } from 'vue'
+```tsx
 import { useQuery } from '@tanstack/solid-query'
 
 const todoFetcher = async () =>
   await fetch('https://jsonplaceholder.cypress.io/todos').then((response) =>
     response.json(),
   )
-export default defineComponent({
-  name: 'SuspendableComponent',
-  async setup() {
-    const { data, suspense } = useQuery(() => ['todos'], todoFetcher)
-    await suspense()
-
-    return { data }
-  },
-})
-</script>
+
+function SuspendableComponent() {
+  const query = useQuery(() => ({
+    queryKey: ['todos'],
+    queryFn: todoFetcher,
+  }))
+
+  // Accessing query.data directly inside a <Suspense> boundary
+  // automatically triggers suspension until data is ready
+  return <div>Data: {JSON.stringify(query.data)}</div>
+}
 ```
 
 ## Fetch-on-render vs Render-as-you-fetch