查询失效处理
仅等待查询变为过期并不总是足够。在修改成功后,你通常已知相关缓存数据已过时。使用 queryClient.invalidateQueries 标记匹配的查询为过期,并对活跃的观察者执行后台重新拉取。
TypeScript
1queryClient.invalidateQueries()2 3queryClient.invalidateQueries({4 queryKey: ['todos'],5})当一个查询被失效处理时:
- 它会被标记为过期,覆盖任何现有的
staleTime - 如果控制器中存在匹配的活跃查询,则可在后台重新拉取
来自修改的失效处理
TypeScript
1private readonly addTodo = createMutationController(this, {2 mutationFn: addTodo,3 onSuccess: async () => {4 await queryClient.invalidateQueries({ queryKey: ['todos'] })5 },6})当修改结果表明相关缓存数据已过期时,请采用此模式。分页示例 展示了项目修改后执行失效处理的用法。
查询匹配
通过前缀匹配一组查询:
TypeScript
1queryClient.invalidateQueries({ queryKey: ['projects'] })以下两个查询键均会匹配:
TypeScript
1const projectsListKey = ['projects']2const projectsPageKey = ['projects', 1, 250, false]当仅需使某一部分数据失效时,请使用更具体的查询键:
TypeScript
1queryClient.invalidateQueries({2 queryKey: ['projects', this.page],3})使用 exact: true 仅匹配完全一致的查询键:
TypeScript
1queryClient.invalidateQueries({2 queryKey: ['projects'],3 exact: true,4})手动缓存更新
相比规范化缓存更新,失效处理通常更简单。当你确实需要立即更新 UI 时,可将定向缓存写入与失效处理结合使用:
TypeScript
1queryClient.setQueryData<TodosResponse>(['todos'], (existing) => {2 if (!existing) return existing3 4 return {5 ...existing,6 items: [...existing.items, createdTodo],7 }8})9 10await queryClient.invalidateQueries({ queryKey: ['todos'] })如需在乐观更新中实现回滚,请参阅修改指南以及 分页示例。