react-query: 常用用法

当然可以！以下是 React Query（v4/v5）常用用法的简明表格，涵盖核心场景和最佳实践：

| 场景 | 用法 | 说明 |
|------|------|------|
| 基础数据获取 | useQuery({ queryKey, queryFn }) | 自动请求、缓存、去重；默认在 mount 时执行 |
| 禁用自动请求 | useQuery({ enabled: false, ... }) | 配合按钮点击或条件触发（如表单提交后） |
| 带参数查询 | queryKey: ['user', userId]queryFn: () => api.getUser(userId) | 将动态参数放入 queryKey，确保缓存隔离 |
| 手动触发请求 | const { refetch } = useQuery(...)refetch() | 重新执行当前 query（不支持传参） |
| 带参手动请求（无额外 state） | const qc = useQueryClient()qc.fetchQuery({ queryKey: [..., id], queryFn: () => api(...id) }) | 立即获取数据 + 自动缓存，适合下拉选择等场景 |
| 提交后刷新列表 | qc.invalidateQueries({ queryKey: ['posts'] }) | 使相关查询失效，自动重新拉取 |
| 乐观更新 | useMutation({ onMutate, onError, onSettled }) + qc.setQueryData | 提升 UX，先更新 UI，再同步服务器 |
| 分页/无限滚动 | useInfiniteQuery | 专为分页设计，支持 getNextPageParam |
| 依赖查询 | enabled: !!data1或 useQuery({ queryKey: ['d2', data1.id], enabled: !!data1 }) | 等待前一个查询完成后再发起下一个 |
| 错误处理 | const { error } = useQuery(...)或全局 QueryClient 配置 onError | 可在组件内或全局统一处理错误 |
| 自动重试 | retry: 3（默认 3 次）retryDelay: 1000 | 网络请求失败时自动重试 |
| 缓存时间控制 | staleTime: 5 * 60 * 1000（5 分钟内不视为过期）cacheTime: 10 * 60 * 1000（内存保留时间） | 减少重复请求，提升性能 |
| 数据转换 | select: (data) => data.items.map(...) | 在组件中只订阅所需部分，避免不必要重渲染 |

补充建议：

• ✅ queryKey 必须是数组，且包含所有影响请求结果的变量（如 id, filter, page）。
• ✅ 避免在 queryFn 外部捕获闭包变量，应从 queryKey 解构参数。
• ✅ 对于一次性操作（如“选择模板加载内容”），优先用 fetchQuery 而非 useQuery + refetch。
• ✅ 使用 useMutation 处理 POST/PUT/DELETE 等写操作。

这个表格覆盖了 90% 以上的日常使用场景，简洁且符合最佳实践。