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 { data, suspense } = useQuery(() => ['todos'], todoFetcher)
await suspense()
return { 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 { data, suspense } = useQuery(() => ['todos'], todoFetcher)
await suspense()
return { data }
},
})
</script>
渲染时获取 vs 渲染即获取
开箱即用，Solid Query 在 suspense 模式下作为 Fetch-on-render 解决方案效果非常好，无需额外配置。这意味着当您的组件尝试挂载时，它们将触发查询获取并挂起，但这仅在您导入并挂载了它们之后。如果您想更进一步，实现 Render-as-you-fetch 模型，我们建议在路由回调和/或用户交互事件上实现 预获取 (Prefetching)，以便在组件挂载之前，甚至在您开始导入或挂载其父组件之前，就开始加载查询。
