查询结果禁止对象剩余解构
在查询结果上使用对象剩余解构会自动订阅查询结果的每个字段，这可能会导致不必要的重新渲染。此规则确保您只订阅您实际需要的字段。
规则详情
此规则的错误代码示例
tsx
/* eslint "@tanstack/query/no-rest-destructuring": "warn" */
const useTodos = () => {
const { data: todos, ...rest } = useQuery({
queryKey: ['todos'],
queryFn: () => api.getTodos(),
})
return { todos, ...rest }
}
/* eslint "@tanstack/query/no-rest-destructuring": "warn" */
const useTodos = () => {
const { data: todos, ...rest } = useQuery({
queryKey: ['todos'],
queryFn: () => api.getTodos(),
})
return { todos, ...rest }
}
此规则的正确代码示例
tsx
const todosQuery = useQuery({
queryKey: ['todos'],
queryFn: () => api.getTodos(),
})
// normal object destructuring is fine
const { data: todos } = todosQuery
const todosQuery = useQuery({
queryKey: ['todos'],
queryFn: () => api.getTodos(),
})
// normal object destructuring is fine
const { data: todos } = todosQuery
何时不应使用
如果您手动设置 notifyOnChangeProps 选项，您可以禁用此规则。由于您没有使用跟踪查询，因此您负责指定哪些 props 会触发重新渲染。
属性
- ✅ 推荐
- 🔧 可修复
