Suspense
Solid Query 也可以与 Solid 的 Suspense API 一起使用。
为此，您需要使用 Solid 提供的 Suspense 组件包装您的可暂停组件
tsx
import { Suspense } from 'solid-js'
;<Suspense fallback={<LoadingSpinner />}>
<SuspendableComponent />
</Suspense>
import { Suspense } from 'solid-js'
;<Suspense fallback={<LoadingSpinner />}>
<SuspendableComponent />
</Suspense>
您可以使用 solid-query 提供的异步 suspense 函数。
vue
<script>
import { defineComponent } from 'vue'
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 query = useQuery(() => ['todos'], todoFetcher)
await query.suspense()
return { data: query.data }
},
})
</script>
<script>
import { defineComponent } from 'vue'
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 query = useQuery(() => ['todos'], todoFetcher)
await query.suspense()
return { data: query.data }
},
})
</script>
Fetch-on-render 与 Render-as-you-fetch
开箱即用，suspense 模式下的 Solid Query 作为 Fetch-on-render 解决方案效果非常好，无需额外配置。这意味着当您的组件尝试挂载时，它们将触发查询获取并暂停，但仅在您导入并挂载它们之后。如果您想更进一步并实现 Render-as-you-fetch 模型，我们建议在路由回调和/或用户交互事件上实现预取，以便在挂载查询之前开始加载查询，甚至希望在开始导入或挂载其父组件之前。
