查询键的详尽依赖项
查询键应该被视为查询函数的依赖项数组：queryFn 中使用的每个变量都应添加到查询键中。这确保了查询被独立缓存，并且在变量更改时自动重新获取查询。
规则详情
此规则的不正确代码示例
tsx
/* eslint "@tanstack/query/exhaustive-deps": "error" */
useQuery({
queryKey: ['todo'],
queryFn: () => api.getTodo(todoId),
})
const todoQueries = {
detail: (id) => ({ queryKey: ['todo'], queryFn: () => api.getTodo(id) }),
}
/* eslint "@tanstack/query/exhaustive-deps": "error" */
useQuery({
queryKey: ['todo'],
queryFn: () => api.getTodo(todoId),
})
const todoQueries = {
detail: (id) => ({ queryKey: ['todo'], queryFn: () => api.getTodo(id) }),
}
此规则的正确代码示例
tsx
useQuery({
queryKey: ['todo', todoId],
queryFn: () => api.getTodo(todoId),
})
const todoQueries = {
detail: (id) => ({ queryKey: ['todo', id], queryFn: () => api.getTodo(id) }),
}
useQuery({
queryKey: ['todo', todoId],
queryFn: () => api.getTodo(todoId),
})
const todoQueries = {
detail: (id) => ({ queryKey: ['todo', id], queryFn: () => api.getTodo(id) }),
}
何时不使用它
如果您不关心查询键的规则，那么您将不需要此规则。
属性
- ✅ 推荐
- 🔧 可修复
