查询键
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)单独缓存,并在宿主状态变更时重新拉取。