禁止对查询结果使用对象剩余解构

在查询结果上使用对象剩余解构会自动订阅查询结果的每个字段，这可能会导致不必要的重新渲染。这确保您只订阅实际需要的字段。

规则详情

此规则的不正确代码示例：

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(),
})

// 普通的对象解构是可以的
const { data: todos } = todosQuery

const todosQuery = useQuery({
  queryKey: ['todos'],
  queryFn: () => api.getTodos(),
})

// 普通的对象解构是可以的
const { data: todos } = todosQuery

何时不使用

如果您手动设置 notifyOnChangeProps 选项，则可以禁用此规则。由于您未使用跟踪查询，因此您有责任指定哪些道具应触发重新渲染。

属性

✅ 推荐
🔧 可修复