react-query: 常用用法
🕐
利用 AI 讲解决 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% 以上的日常使用场景，简洁且符合最佳实践。