译零 TransZero · TanStack Query 中文文档
主站

查询键

更新于 2026-11-02 Lit 查看英文原文 ↗

TanStack Query 通过查询键(query key)管理缓存。查询键在顶层必须是数组,且应唯一描述查询函数所返回的数据。

简单查询键

对列表资源或非层级结构的数据,使用简单查询键:

TypeScript
1createQueryController(this, {2  queryKey: ['todos'],3  queryFn: fetchTodos,4})5 6createQueryController(this, {7  queryKey: ['settings'],8  queryFn: fetchSettings,9})

带变量的查询键

当变量会影响查询所拉取的数据时,需将其包含在查询键中:

TypeScript
1createQueryController(this, () => ({2  queryKey: ['todo', this.todoId],3  queryFn: () => fetchTodo(this.todoId),4}))5 6createQueryController(this, () => ({7  queryKey: ['projects', { page: this.page, filter: this.filter }],8  queryFn: () => fetchProjects({ page: this.page, filter: this.filter }),9}))

分页示例在查询工厂中构建其查询键,并与查询函数一同定义:

TypeScript
1export const projectsQueries = {2  all: () => ['projects'] as const,3  list: (page: number, delayMs: number, forceError: boolean) =>4    queryOptions({5      queryKey: [6        ...projectsQueries.all(),7        'list',8        page,9        delayMs,10        forceError,11      ] as const,12      queryFn: () => projectsAPI.getProjects(page, delayMs, forceError),13    }),14}

确定性哈希

对象在查询键内的属性顺序无关紧要:

TypeScript
1const keyA = ['todos', { status, page }]2const keyB = ['todos', { page, status }]

但数组内元素的顺序至关重要:

TypeScript
1const keyA = ['todos', status, page]2const keyB = ['todos', page, status]

查询键作为依赖项

若你的查询函数读取了响应式宿主属性(reactive host property),请将该值包含在查询键中:

TypeScript
1class UserTodos extends LitElement {2  static properties = {3    userId: { type: String },4  }5 6  userId = ''7 8  private readonly todos = createQueryController(this, () => ({9    queryKey: ['todos', this.userId],10    queryFn: () => fetchTodos(this.userId),11  }))12}

这使得 Lit Query 能为每位用户的待办事项(todos)单独缓存,并在宿主状态变更时重新拉取。

本页为 TanStack Query 文档(Lit 版)的非官方中文翻译,原文由上游团队维护,遵循 MIT 许可。 译文如有偏差,以英文原文为准。

译自上游 59d11de