如何在Provider外访问React Query的queryClient？如Cypress测试中失效缓存

• 导入无效原因说明：Cypress测试代码运行在独立的沙箱执行上下文，和页面中运行的应用代码属于两个完全分离的模块加载环境，你在测试中导入的queryClient是测试侧初始化的实例，和应用实际运行时使用的实例不是同一个，因此操作不会生效。
• 推荐解决方案：在应用侧将queryClient暴露到全局window对象，可配置仅测试/开发环境开启，不会影响生产环境。
  应用侧初始化代码示例：

  import { QueryClient } from '@tanstack/react-query'
  
  export const queryClient = new QueryClient()
  
  // 仅在Cypress测试环境下暴露到全局
  if (window.Cypress) {
    window.queryClient = queryClient
  }
  

• Cypress测试侧使用方式：

  // 完成自定义fetch/mutate操作后，获取页面实际运行的queryClient实例操作缓存
  cy.window().then(win => {
    // 失效指定key的缓存
    win.queryClient.invalidateQueries({ queryKey: ['你的查询key'] })
    // 也可以直接清空所有缓存
    // win.queryClient.clear()
  })
  

  该方案完全适配你绕过复杂业务流程的测试需求，不需要改动现有业务逻辑。

内容的提问来源于stack exchange，提问作者Zander