Suspense

信息

• 确保你使用的是最新版本的 React

  ¥Ensure you're on the latest version of React

• 如果你对 Next.js 中 tRPC 的自动 SSR 使用暂挂，则如果查询失败，即使你有 <ErrorBoundary />，整页也会在服务器上崩溃

  ¥If you use suspense with tRPC's automatic SSR in Next.js, the full page will crash on the server if a query fails, even if you have an <ErrorBoundary />

用法

¥Usage

提示

useSuspenseQuery 和 useSuspenseInfiniteQuery 都返回 [data, query] 元组，以便轻松直接使用数据并将变量重命名为描述性内容

¥useSuspenseQuery & useSuspenseInfiniteQuery both return a [data, query]-tuple, to make it easy to directly use your data and renaming the variable to something descriptive

useSuspenseQuery()

tsx
// @filename: pages/index.tsx
import React from 'react';
import { trpc } from '../utils/trpc';
 
function PostView() {
  const [post, postQuery] = trpc.post.byId.useSuspenseQuery({ id: '1' });
          
const post: {
    id: string;
    title: string;
}
 
  return <>{/* ... */}</>;
}

tsx
// @filename: pages/index.tsx
import React from 'react';
import { trpc } from '../utils/trpc';
 
function PostView() {
  const [post, postQuery] = trpc.post.byId.useSuspenseQuery({ id: '1' });
          
const post: {
    id: string;
    title: string;
}
 
  return <>{/* ... */}</>;
}

useSuspenseInfiniteQuery()

tsx
// @filename: pages/index.tsx
import React from 'react';
import { trpc } from '../utils/trpc';
function PostView() {
  const [pages, allPostsQuery] = trpc.post.all.useSuspenseInfiniteQuery(
    {},
    {
      getNextPageParam(lastPage) {
        return lastPage.nextCursor;
      },
    },
  );
  const { isFetching, isFetchingNextPage, fetchNextPage, hasNextPage } =
    allPostsQuery;
  return <>{/* ... */}</>;
}

tsx
// @filename: pages/index.tsx
import React from 'react';
import { trpc } from '../utils/trpc';
function PostView() {
  const [pages, allPostsQuery] = trpc.post.all.useSuspenseInfiniteQuery(
    {},
    {
      getNextPageParam(lastPage) {
        return lastPage.nextCursor;
      },
    },
  );
  const { isFetching, isFetchingNextPage, fetchNextPage, hasNextPage } =
    allPostsQuery;
  return <>{/* ... */}</>;
}