Suspense

更新于 2026-11-02 Solid 查看英文原文 ↗

Solid Query 也可与 Solid 的 Suspense API 配合使用。

为此，你需要用 Solid 提供的 Suspense 组件包裹可挂起（suspendable）的组件：

TypeScript

1import { Suspense } from 'solid-js'2;<Suspense fallback={<LoadingSpinner />}>3  <SuspendableComponent />4</Suspense>

然后在该边界内读取查询的 data。data 属性是一个 Solid 资源（resource），因此读取它会使组件挂起，直至查询获得数据。

TypeScript

1import { useQuery } from '@tanstack/solid-query'2 3const todoFetcher = async () =>4  await fetch('https://jsonplaceholder.cypress.io/todos').then((response) =>5    response.json(),6  )7 8function SuspendableComponent() {9  const todosQuery = useQuery(() => ({10    queryKey: ['todos'],11    queryFn: todoFetcher,12  }))13 14  // Accessing todosQuery.data directly inside a <Suspense> boundary15  // automatically triggers suspension until data is ready16  return <div>Data: {JSON.stringify(todosQuery.data)}</div>17}

渲染时拉取（Fetch-on-render） vs 边渲染边拉取（Render-as-you-fetch）

开箱即用时，Solid Query 在 suspense 模式下天然适合作为 渲染时拉取 方案，无需额外配置。这意味着当你的组件尝试挂载时，会触发查询拉取并挂起，但仅限于你已导入并挂载这些组件之后。若要进阶实现 边渲染边拉取 模型，我们建议在路由回调和/或用户交互事件中实现 Prefetching，以便在组件挂载前就开始加载查询，甚至可能早于其父组件的导入或挂载。