用途
该技能用于在表单中整合 TanStack Query 的数据查询（query）与变更（mutation），解决服务端状态与客户端可编辑状态之间的同步问题。适用于需要以服务端数据初始化表单、同时允许用户编辑、并处理后台更新与提交的场景。
主要能力
技能围绕以下核心模式展开：
- 仅用初始数据：当表单由单一用户拥有、编辑期间后台更新无用时使用。示例中将 useQuery 的 staleTime 设为 Infinity，并通过 useMutation 在成功后调用 queryClient.invalidateQueries 使查询失效。
- 派生服务端加客户端状态：当未触碰字段仍应显示后台更新时使用。通过 useState 保存草稿（draft），显示值采用
draft.firstName ?? data.firstName的形式派生。 - 等待失效后重置：在 onSuccess 或 onSettled 中返回失效的 promise，确保保存后的服务端状态回到缓存后再重置表单。
使用方式
技能提供代码示例，涉及从 @tanstack/react-query 导入 useMutation、useQuery、useQueryClient，并展示查询、变更、失效与表单重置的组合写法。示例包含 TypeScript 类型标注（如 { id: string }、PersonFormValues）以及 JSX 结构。
适用场景
- 表单需要以服务端数据作为初始值。
- 用户编辑期间可能发生后台重新获取。
- 需要区分脏字段与未触碰字段的显示逻辑。
- 需要在提交后确保缓存中的服务端状态已更新再重置表单。
限制与常见错误
技能明确指出三类常见错误：
- 高优先级：在查询数据存在前初始化表单默认值。首次渲染通常没有查询数据，应拆分表单边界，或从查询数据加草稿状态派生字段值。
- 高优先级：后台重新获取覆盖或隐藏脏客户端状态。不应将每次服务端更新同步进草稿，应派生显示值，或对仅初始化的表单有意选择不进行后台更新。
- 中优先级：表单提交可能执行两次。应使用 mutation 状态（如
mutation.isPending）在提交进行中禁用提交按钮，阻止重复写入。
暂未提供
关于该技能的安装命令、版本要求、平台支持、收费方式等信息，资料中暂未提供。