Suspense

React 查看英文原文 ↗

注意：React Query 的 Suspense 模式是实验性的，与数据获取本身的 Suspense 模式相同。除非您将 React 和 React Query 版本都锁定为彼此兼容的补丁级别，否则这些 API 将会更改，且不应在生产中使用。

React Query 也可以与 React 的新 Suspense for Data Fetching API 一起使用。要启用此模式，可以将全局或查询级别配置的 suspense 选项设置为 true。

全局配置：

JavaScript

1import { QueryClient, QueryClientProvider } from "react-query";2 3const queryClient = new QueryClient({4  defaultOptions: {5    queries: {6      suspense: true,7    },8  },9});10 11function Root() {12  return (13    <QueryClientProvider client={queryClient}>14      <App />15    </QueryClientProvider>16  );17}

单独配置

JavaScript

1import { useQuery } from "react-query";2 3useQuery(queryKey, queryFn, { suspense: true });

使用 Suspense 模式时，不需要 status 状态和 error 对象。而是用 React.Suspense 组件（包括使用 fallback prop 和 React 错误边界来捕获错误）替换。请阅读“重置错误边界”并查看“ Suspense 示例”，以获取有关如何设置 Suspense 模式的更多信息。

除了在 Suspense 模式下查询行为的不同外，修改的行为也有所不同。默认情况下，当修改失败时，不提供 error 变量，而是在下一次渲染所使用的组件时将其抛出，并传播到最近的错误边界，类似于查询错误。如果要禁用此功能，可以将 useErrorBoundary 选项设置为 false。如果您希望根本不引发异常，则可以将 throwOnError 选项也设置为 false！

重置错误边界

无论您在查询中使用 suspense 还是 useErrorBoundaries，您都需要一种让查询知道，在发生某些错误后重新渲染时，“想要”重试的方法。

查询错误可以使用 QueryErrorResetBoundary 组件或 useQueryErrorResetBoundary hook 来重置。

使用组件时，它将重置组件范围内的所有查询错误：

JavaScript

1import { QueryErrorResetBoundary } from "react-query";2import { ErrorBoundary } from "react-error-boundary";3 4const App: React.FC = () => (5  <QueryErrorResetBoundary>6    {({ reset }) => (7      <ErrorBoundary8        onReset={reset}9        fallbackRender={({ resetErrorBoundary }) => (10          <div>11            There was an error!12            <Button onClick={() => resetErrorBoundary()}>Try again</Button>13          </div>14        )}15      >16        <Page />17      </ErrorBoundary>18    )}19  </QueryErrorResetBoundary>20);

当使用该 hook 时，它将重置最近的 QueryErrorResetBoundary 内的任何查询错误。如果没有定义边界，它将全局重置它们：

JavaScript

1import { useQueryErrorResetBoundary } from "react-query";2import { ErrorBoundary } from "react-error-boundary";3 4const App: React.FC = () => {5  const { reset } = useQueryErrorResetBoundary();6  return (7    <ErrorBoundary8      onReset={reset}9      fallbackRender={({ resetErrorBoundary }) => (10        <div>11          There was an error!12          <Button onClick={() => resetErrorBoundary()}>Try again</Button>13        </div>14      )}15    >16      <Page />17    </ErrorBoundary>18  );19};

渲染时获取 vs 按需渲染

Suspense 模式下的 React Query 作为一种不需要额外配置的、渲染时获取现的解决方案工作得非常好。这意味着，当您的组件尝试挂载时，它们将触发查询获取和 suspend，但仅在您导入并挂载它们之后。如果你想更进一步，实现“按需渲染”模型，我们建议在路由回调和/或用户交互事件上实现预取数据，以在装入查询之前开始加载查询。你甚至可以期望在开始导入之前就开始加载查询。甚至是其父组件挂载之前。