查询键的详尽依赖项 | TanStack Query Docs

查询键的详尽依赖项

查询键应被视为查询函数的依赖数组：查询函数内部使用的每个变量都应添加到查询键中。这确保了查询被独立缓存，并且当变量更改时查询会自动重新获取。

规则详情

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

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

何时不使用

如果您不关心查询键的规则，则不需要此规则。

属性

✅ 推荐
🔧 可修复