用一个简单Feature巩固Query缓存概念

总览：你要做的这个小项目长啥样

你要产出的是一个最小但完整的小项目：

• TypeScript + React（可以用 Vite 创建）
• 有两个页面：帖子列表页、帖子详情页
• 两个页面都用 TanStack Query 请求同一个 REST 接口的数据（例如 JSONPlaceholder 的 /posts）
• 集成 TanStack Query Devtools，亲眼看缓存怎么复用、什么时候失效

先看一下整体结构，用一个简化的路由+组件关系图：

• 列表页和详情页共享同一个 Query Key 体系，从同一个缓存读取
• 你可以通过 Devtools 观察：组件卸载、重新进入、窗口聚焦时，缓存有什么变化（是否重新请求、状态如何）

这一节之后，你会有一个可以直接跑的项目骨架，并能解释：为什么这里列表和详情不多请求一次，而是共用缓存。文中提到的 Query Key 和类型用法，可以对照 TanStack 官方文档里的说明一起看：Query Keys、TypeScript 支持、React Overview。