如何在提供者之外访问 React Query `queryClient`？例如使赛普拉斯测试中的查询无效答案

【问题标题】：How to access the React Query `queryClient` outside the provider? e.g. to invalidate queries in Cypress tests如何在提供者之外访问 React Query `queryClient`？例如使赛普拉斯测试中的查询无效
【发布时间】：2021-09-27 09:08:08
【问题描述】：

是否可以在 React 之外访问我的应用程序的 React Query queryClient？

在我的一些赛普拉斯测试中，我获取或改变了一些数据，但之后我想使所有/部分 queryClient 缓存无效。

这可能吗？

我已尝试导入应用程序中使用的“相同”queryClient，但它不起作用。

ℹ️ 我将这些 fetch/mutations 包含在我的测试中只是为了让我绕过用户通常会在已经进行 Cypress 测试的应用程序中执行的复杂步骤。

【问题讨论】：

仅供参考这已被交叉发布到 React Query 存储库的讨论中：github.com/tannerlinsley/react-query/discussions/2727

标签： reactjs cypress react-query

【解决方案1】：

您可以在窗口中添加对queryClient 的引用，然后在测试中调用它的方法。

来自@АлексейМартинкевич 示例代码，

import { QueryClient } from "react-query";

const queryClient = new QueryClient();

if (window.Cypress) {           // only during testing
  window.queryClient = queryClient;
}

export queryClient;

在测试中

cy.window().then(win => {  // get the window used by app (window in above code)

  win.queryClient.invalidateQueries(...)  // exact same instance as app is using

})

我相信导入会给你一个新的实例，你必须传递一个对应用程序的活动实例的引用。

请阅读您的评论，这正是说明了这一点 - 将答案作为代码示例。

【讨论】：

感谢您的回复。我以为会是这样。我现在就测试一下
感谢我们为 Apollo Client 做了类似的事情

【解决方案2】：

您可以将查询客户端存储为单独的模块/全局变量。 demo

【讨论】：

感谢深入的演示，但我相信我已经这样做了，并且在 React 应用程序“外部”时它不起作用。你确定吗？当我说：“我尝试导入应用程序中使用的“相同”queryClient，但它不起作用。'时，这正是我的意思。我还没有尝试过，但我想我可能需要将queryClient 作为属性存储在window 对象上。
在我的演示中useQueryClient() === queryClient。 JS 模块应该只计算一次，所以重新导入应该总是给出相同的实例。此外，QueryClientProvider 提供与它接收到的相同的实例。我看不出它不应该起作用的原因。也许环境有什么问题。