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

Question

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

\n

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

\n

那可能吗？

\n

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

\n

\xe2\x84\xb9\xef\xb8\x8f 我在测试中包含这些获取/突变只是为了让我绕过用户通常在已经进行赛普拉斯测试的应用程序中采取的复杂步骤。

\n

Answer 1

您可以添加参考queryClient，然后在测试中调用它的方法。

\n

来自 @\xd0\x90\xd0\xbb\xd0\xb5\xd0\xba\xd1\x81\xd0\xb5\xd0\xb9\xd0\x9c\xd0\xb0\xd1\x80\xd1\x82\xd0\xb8 \xd0\xbd\xd0\xba\xd0\xb5\xd0\xb2\xd0\xb8\xd1\x87 示例代码，

\n

import { QueryClient } from "react-query";\n\nconst queryClient = new QueryClient();\n\nif (window.Cypress) {           // only during testing\n  window.queryClient = queryClient;\n}\n\nexport queryClient;\n

\n

在测试中

\n

cy.window().then(win => {  // get the window used by app (window in above code)\n\n  win.queryClient.invalidateQueries(...)  // exact same instance as app is using\n\n})\n

\n

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

\n\n

刚读你的评论，它正是这样说的 - 将答案作为代码示例。

\n

Answer 2

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