Skip to content

Commit 878782b

Browse files
docs(solid-query): fix incorrect Vue.js code example in Suspense guide (#9813)
* docs(solid-query): fix incorrect Vue.js code example in Suspense guide Replace Vue.js code example with proper SolidJS syntax in the Suspense documentation. The example was using Vue's defineComponent and setup() instead of SolidJS patterns. Fixes issue with non-existent useSuspenseQuery examples in Solid Query docs. * fix: use idiomatic SolidJS pattern for Suspense Remove unnecessary createEffect and rely on direct query.data access. According to TanStack Query Solid docs, accessing query.data directly inside a Suspense boundary automatically triggers suspension. Addresses CodeRabbit AI feedback for proper SolidJS patterns.
1 parent 9ede44d commit 878782b

File tree

1 file changed

+12
-13
lines changed

1 file changed

+12
-13
lines changed

docs/framework/solid/guides/suspense.md

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -16,25 +16,24 @@ import { Suspense } from 'solid-js'
1616

1717
You can use async `suspense` function that is provided by `solid-query`.
1818

19-
```vue
20-
<script>
21-
import { defineComponent } from 'vue'
19+
```tsx
2220
import { useQuery } from '@tanstack/solid-query'
2321

2422
const todoFetcher = async () =>
2523
await fetch('https://jsonplaceholder.cypress.io/todos').then((response) =>
2624
response.json(),
2725
)
28-
export default defineComponent({
29-
name: 'SuspendableComponent',
30-
async setup() {
31-
const { data, suspense } = useQuery(() => ['todos'], todoFetcher)
32-
await suspense()
33-
34-
return { data }
35-
},
36-
})
37-
</script>
26+
27+
function SuspendableComponent() {
28+
const query = useQuery(() => ({
29+
queryKey: ['todos'],
30+
queryFn: todoFetcher,
31+
}))
32+
33+
// Accessing query.data directly inside a <Suspense> boundary
34+
// automatically triggers suspension until data is ready
35+
return <div>Data: {JSON.stringify(query.data)}</div>
36+
}
3837
```
3938

4039
## Fetch-on-render vs Render-as-you-fetch

0 commit comments

Comments
 (0)