查询键

Tanstack Query 的核心功能是根据queryKey来管理查询缓存，queryKey顶层必须是一个数组，可以是一个仅包含字符串的简单数组，也可以是包含多个字符串和嵌套对象的复杂数组，只要queryKey是可序列化且能唯一标识查询的数据，你就可以使用它。

简单的 QueryKey

最简单的queryKey形式是一个包含固定值的数组，这种格式适用于：

• 通用的列表或索引资源

• 非层级结构的资源

// A list of todos
useQuery({ queryKey: ['todos'], ... })

// Something else, whatever!
useQuery({ queryKey: ['something', 'special'], ... })

带变量的 QueryKey

当查询需要更多的信息来唯一标识其数据时，可以使用一个包含字符串和任意数量可序列化对象的数组来描述它。

// 单个 todo 项目
useQuery({ queryKey: ['todo', 5], ... })

// 以 "preview" 格式展示的单个 todo 项目
useQuery({ queryKey: ['todo', 5, { preview: true }], ...})

// 状态为 "done" 的 todo 列表
useQuery({ queryKey: ['todos', { type: 'done' }], ... })

QueryKey 是以确定性方式进行哈希计算的

这意味着对象中 key 的顺序不会影响哈希结果，因此以下查询 key 会被视为相同：

useQuery({ queryKey: ['todos', { status, page }], ... })
useQuery({ queryKey: ['todos', { page, status }], ...})
useQuery({ queryKey: ['todos', { page, status, other: undefined }], ... })

但是，以下查询键并不相等，数组项的顺序很重要！

useQuery({ queryKey: ['todos', status, page], ... })
useQuery({ queryKey: ['todos', page, status], ...})
useQuery({ queryKey: ['todos', undefined, page, status], ...})

如果 QueryKey 依赖于变量，请将其包含在查询键中

由于queryKey唯一标识所获取的数据，因此它们应该包含查询函数中使用的、会发生变化的所有变量。例如：

function Todos({ todoId }) {
  const result = useQuery({
    queryKey: ["todos", todoId],
    queryFn: () => fetchTodoById(todoId)
  });
}

注意，queryKey 充当查询函数的依赖项。将依赖变量添加到queryKey将确保查询被独立缓存，并且每当变量发生变化时，查询都会自动重新获取（取决于您的staleTime设置）。有关更多信息和示例，请参阅exhaustive-deps 部分。