对查询结果使用对象剩余解构会自动订阅查询结果的每个字段,这可能会导致不必要的重新渲染。这确保你只订阅你实际需要的字段。
此规则的 不正确 代码示例
/* 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 }
}
此规则的 正确 代码示例
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 选项,你可以禁用此规则。由于你未使用跟踪查询,因此你负责指定哪些属性应触发重新渲染。