为什么使用react-query库中的useQueryClient？

Question

在react-query的快速入门文档中，有以下示例：

// Create a client
const queryClient = new QueryClient();

const App = function () {
  return (
    // Provide the client to your App
    <QueryClientProvider client={ queryClient }>
      <Todos />
    </QueryClientProvider>
  );
};

const Todos = function () {

  // Access the client
  const queryClient = useQueryClient();

  // ...

  return (
    <>
      ...
    </>
  );
};

但我不明白为什么我应该在 Todos 中使用 useQueryClient 挂钩。

// Access the client
const queryClient = useQueryClient();

我的意思是我不能queryClient从主文件中导出实例：

// App.js
export const queryClient = new QueryClient();

然后立即将其导入到 Todos 中？

// Todos.js
import { queryClient } from './App';

我问这个的原因是因为我想使用除了react之外的queryClient实例（可能在另一个库的侦听器函数内），并且我想知道是否只能从react钩子访问它（为了不弄乱某些东西） up）那么我将无法以其他方式使用它。

Answer 1

useQueryClient首选的原因主要有以下三个：

1. 它将您的应用程序与实际实现分离（对我来说最大的胜利）。这在进行测试时尤其重要。例如，当测试错误的端点时，react-query 将使用指数退避进行 3 次重试。这意味着您的测试需要更长的时间，甚至可能会在这些情况下超时。这可以通过 QueryClient 全局关闭测试重试来解决。您只需提供一个不同的 QueryClient 来将您的组件包装在已关闭重试的测试中。
2. 有时需要在 App 组件内创建 QueryClient （稳定、反应状态或实例引用）。例如，如果您需要关闭传递给 QueryClient 的默认值中另一个钩子提供的值，或者在进行服务器端渲染时，建议这样做以避免在请求和用户之间泄漏数据。
3. React-query 内部使用useQueryClient从 Provider 获取最近的 QueryClient。所以无论如何你都需要创建Provider。

Answer 2

QueryClientProvider是一个 React 上下文提供者。在 React 中，您可以通过钩子访问上下文，因为没有保证的通用上下文。该钩子返回来自调用者组件的祖先的最直接的上下文。

您无法导出它，App.js因为它上面没有QueryClientProvider。你可以解决它。但这也行不通。您只能在组件内调用挂钩，而不能从组件内部导出某些内容。根据您的实施情况，每个请求也可能重新呈现整个站点。

总的来说，这似乎是一个坏主意。