跳转到内容
IO IO IO

Query 专题

是什么

Section titled “是什么”

这个专题聚焦 @iostore/store/query 及其框架适配层，目标是把 Query 的生命周期、缓存策略、提交回滚和 SSR 注入讲清楚。

何时使用

Section titled “何时使用”
  • 你需要统一处理请求、重试、取消、失效刷新。
  • 你希望一套 Query 语义在多框架复用。
  • 你需要把 CSR 与 SSR 的缓存策略对齐。

学习路径

Section titled “学习路径”
  1. 先完成 异步 TodoList 教程，快速建立完整心智模型。
  2. 再在 Playground 里走一遍交互，观察失败、重试与恢复。
  3. 继续 Vanilla：Query Client 与生命周期 建立公共语义。
  4. 先掌握 key、缓存、重试、分页等核心能力，再进入各框架适配页。
  5. 在框架适配页的「读写实战」中学习 useIO 与本地状态联动。

能力地图

Section titled “能力地图”
能力章节
从 0 到 1 的完整示例异步 TodoList 教程
交互式演练与故障恢复Playground
Client 创建与请求生命周期Vanilla：Query Client 与生命周期
useIO 联动本地状态各框架适配页的 读写实战（统一迁移）
Key 设计、缓存命中、手动刷新Query Key、缓存与刷新
提交、乐观更新、回滚与失效提交与乐观更新
架构总览与状态机架构总览与状态机
分页、预取与取消分页、预取与取消
Infinite Query 专题Infinite Query：无限加载与分页窗口
SSR 预取与缓存注入SSR 缓存注入策略
框架接入（目录化）React 适配入口（其余框架同结构）

适配器目录结构（8 框架统一）

Section titled “适配器目录结构（8 框架统一）”

每个框架都使用同一套 4 页结构：

  1. /<framework>-adapter/（概览）
  2. /<framework>-adapter/quick-start/（10 分钟上手）
  3. /<framework>-adapter/read-write-workflow/（读写实战）
  4. /<framework>-adapter/production-patterns/（进阶与上线）

已覆盖框架：React、Vue、Svelte、Solid、Lynx、Next.js、Nuxt、SvelteKit。

框架入口

Section titled “框架入口”

推荐阅读顺序

Section titled “推荐阅读顺序”
  1. 异步 TodoList 教程
  2. Playground
  3. Vanilla：Query Client 与生命周期
  4. Query Key、缓存与刷新
  5. 提交与乐观更新
  6. 架构总览与状态机
  7. 分页、预取与取消
  8. Infinite Query：无限加载与分页窗口
  9. SSR 缓存注入策略
  10. 选择你的目标框架入口（例如 React 适配）。
  11. 按该框架的固定 4 页路径完成：概览 -> quick-start -> read-write-workflow -> production-patterns。
  12. 在「读写实战」章节学习 useIO 联动本地状态（已从 Query 架构统一迁移）。

下一步

Section titled “下一步”