Suspense

你可以使用 useSuspenseQuery hook，从而让 Quaere 和 React Suspense 一起使用：

import { Suspense } from "react";
import { useSuspenseQuery } from "quaere";
 
function Profile() {
  const { data } = useSuspenseQuery({ query: userQuery });
  return <div>hello, {data.name}</div>;
}
 
function App() {
  return (
    <Suspense fallback={<div>loading...</div>}>
      <Profile />
    </Suspense>
  );
}

无论您是在查询中使用 suspense 还是 throwOnError，在某些错误发生后重新渲染时，您都需要一种方法来让查询知道您希望在再次尝试时重置。

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

使用该组件将在组件范围内重置任何查询错误：

import { QueryErrorResetBoundary } from "quaere";
import { ErrorBoundary } from "react-error-boundary";
 
const App: React.FC = () => (
  <QueryErrorResetBoundary>
    {({ reset }) => (
      <ErrorBoundary
        onReset={reset}
        fallbackRender={({ resetErrorBoundary }) => (
          <div>
            There was an error!
            <Button onClick={() => resetErrorBoundary()}>Try again</Button>
          </div>
        )}
      >
        <Page />
      </ErrorBoundary>
    )}
  </QueryErrorResetBoundary>
);

💡

useSuspenseQuery 模式会在数据准备就绪前暂停渲染，这意味着它很容易导致请求瀑布问题。为了避免这种情况，应该使用 useSuspenseQueries 来并行请求多个资源。更多信息

function Profile() {
  const [{ data: user }, { data: posts }] = useSuspenseQueries({
    queries: [{ query: userQuery }, { query: postsQuery }],
  });
  return <div>hello, {user.name}</div>;
}

性能 Next.js SSG 和 SSR