# TanStack（查询+路由器+启动） React 应用程序的类型安全库。 **查询**管理服务器状态（获取、缓存、突变）。 **路由器** 提供基于文件的路由以及经过验证的搜索参数和数据加载器。 **Start** 使用 SSR、服务器功能和全栈应用程序的中间件扩展了 Router。 ## 何时使用 **查询** \- 数据获取、缓存、突变、乐观更新、无限滚动、流式 AI/SSE 响应、tRPC v11 集成 **路由器** \- 基于文件的路由、类型安全导航、经过验证的搜索参数、路由加载器、代码分割、预加载 **开始** \- SSR/SSG、服务器功能（类型安全 RPC）、中间件、API 路由、部署到 Cloudflare/Vercel/Node **决策树：** * 具有 API 调用的仅限客户端 SPA -> 路由器 + 查询 * 具有SSR/服务器功能的全栈->启动+查询（启动包括路由器） ## TanStack 查询 v5 ### 设置从 '@tanstack/react-query' 导入 { QueryClient, QueryClientProvider } const queryClient = 新的 QueryClient({ 默认选项：{ 查询：{ staleTime: 1000 * 60 * 5, // 5 分钟 }, }, }) 函数应用程序（）{ 返回（ <你的应用程序/> ） } ### 查询从 '@tanstack/react-query' 导入 { useQuery, queryOptions } // 可重用的查询定义（推荐模式） const todosQueryOptions = queryOptions({ 查询键：['todos'], queryFn: async () => { const res = 等待 fetch('/api/todos') if (!res.ok) throw new Error('获取失败') 返回 res.json() 作为 Promise }, }) // 在组件中 - 来自 queryOptions 的完整类型推断函数 TodoList() { const { 数据，isLoading，错误 } = useQuery(todosQueryOptions) if (isLoading) 返回 if (error) return

错误: {error.message}

{t.title}

} ### 突变从 '@tanstack/react-query' 导入 { useMutation, useQueryClient } 函数 CreateTodo() { const queryClient = useQueryClient() const 突变 = useMutation({ 突变Fn：（newTodo：{标题：字符串}）=> fetch('/api/todos', { method: 'POST', body: JSON.stringify(newTodo) }).then(r => r.json()), 成功：() => { queryClient.invalidateQueries({ queryKey: ['todos'] }) }, }) 返回（

坦斯塔克

包含技能