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

查询失效处理

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

仅等待查询变为过期并不总是足够。在修改成功后,你通常已知相关缓存数据已过时。使用 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'] })

如需在乐观更新中实现回滚,请参阅修改指南以及 分页示例。

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

译自上游 59d11de