查询键
TanStack Query 的核心是基于查询键为你管理查询缓存。查询键必须是顶级的数组，可以像包含单个字符串的数组一样简单，也可以像包含多个字符串和嵌套对象的数组一样复杂。只要查询键是可序列化的，并且对于查询的数据是唯一的，你就可以使用它！
简单查询键
最简单的键形式是包含常量值的数组。此格式适用于
- 通用列表/索引资源
- 非层级资源
ts
// A list of todos
injectQuery(() => ({ queryKey: ['todos'], ... }))
// Something else, whatever!
injectQuery(() => ({ queryKey: ['something', 'special'], ... }))
// A list of todos
injectQuery(() => ({ queryKey: ['todos'], ... }))
// Something else, whatever!
injectQuery(() => ({ queryKey: ['something', 'special'], ... }))
带有变量的数组键
当查询需要更多信息来唯一描述其数据时，你可以使用包含字符串和任意数量可序列化对象的数组来描述它。这适用于
- 层级或嵌套资源
- 通常传递 ID、索引或其他基本类型来唯一标识项目
- 带有附加参数的查询
- 通常传递包含附加选项的对象
ts
// An individual todo
injectQuery(() => ({queryKey: ['todo', 5], ...}))
// An individual todo in a "preview" format
injectQuery(() => ({queryKey: ['todo', 5, {preview: true}], ...}))
// A list of todos that are "done"
injectQuery(() => ({queryKey: ['todos', {type: 'done'}], ...}))
// An individual todo
injectQuery(() => ({queryKey: ['todo', 5], ...}))
// An individual todo in a "preview" format
injectQuery(() => ({queryKey: ['todo', 5, {preview: true}], ...}))
// A list of todos that are "done"
injectQuery(() => ({queryKey: ['todos', {type: 'done'}], ...}))
查询键是确定性地哈希的！
这意味着无论对象中键的顺序如何，以下所有查询都被认为是相等的
ts
injectQuery(() => ({ queryKey: ['todos', { status, page }], ... }))
injectQuery(() => ({ queryKey: ['todos', { page, status }], ...}))
injectQuery(() => ({ queryKey: ['todos', { page, status, other: undefined }], ... }))
injectQuery(() => ({ queryKey: ['todos', { status, page }], ... }))
injectQuery(() => ({ queryKey: ['todos', { page, status }], ...}))
injectQuery(() => ({ queryKey: ['todos', { page, status, other: undefined }], ... }))
然而，以下查询键是不相等的。数组项的顺序很重要！
ts
injectQuery(() => ({ queryKey: ['todos', status, page], ... }))
injectQuery(() => ({ queryKey: ['todos', page, status], ...}))
injectQuery(() => ({ queryKey: ['todos', undefined, page, status], ...}))
injectQuery(() => ({ queryKey: ['todos', status, page], ... }))
injectQuery(() => ({ queryKey: ['todos', page, status], ...}))
injectQuery(() => ({ queryKey: ['todos', undefined, page, status], ...}))
如果你的查询函数依赖于一个变量，请将其包含在你的查询键中
由于查询键唯一地描述了它们正在获取的数据，因此它们应该包含你在查询函数中使用的任何会变化的变量。例如
ts
todoId = signal(-1)
injectQuery(() => ({
enabled: todoId() > 0,
queryKey: ['todos', todoId()],
queryFn: () => fetchTodoById(todoId()),
}))
todoId = signal(-1)
injectQuery(() => ({
enabled: todoId() > 0,
queryKey: ['todos', todoId()],
queryFn: () => fetchTodoById(todoId()),
}))
请注意，查询键充当你的查询函数的依赖项。将依赖变量添加到你的查询键将确保查询被独立缓存，并且任何时候变量发生变化，查询都会自动重新获取（取决于你的 staleTime 设置）。有关更多信息和示例，请参阅 exhaustive-deps 部分。
