查询键的详尽依赖项
查询键应该被视为查询函数的依赖项数组：查询函数中使用的每个变量都应该添加到查询键中。这确保了查询被独立缓存，并且在变量更改时查询会自动重新获取。
规则详情
此规则的错误代码示例
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) }),
}
何时不使用它
如果你不关心查询键的规则，那么你将不需要此规则。
属性
- ✅ 推荐
- 🔧 可修复
