跳至主内容
版本：11.x

Suspense

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

信息
  • 确保你使用的是最新版本的 React
  • 如果在 Next.js 中结合 tRPC 的 自动 SSR 功能 使用 Suspense，即使配置了 <ErrorBoundary />，查询失败时整个服务器端页面仍会崩溃

用法​

技巧

useSuspenseQuery 和 useSuspenseInfiniteQuery 都返回 [data, query] 元组（tuple），便于直接使用数据并为变量赋予更具描述性的名称

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 <>{/* ... */}</>;
}

useSuspenseQueries()​

这是 useQueries() 的 Suspense 等效实现。

tsx
const Component = (props: { postIds: string[] }) => {
  const [posts, postQueries] = trpc.useSuspenseQueries((t) =>
    props.postIds.map((id) => t.post.byId({ id })),
  );
  return <>{/* [...] */}</>;
};
tsx
const Component = (props: { postIds: string[] }) => {
  const [posts, postQueries] = trpc.useSuspenseQueries((t) =>
    props.postIds.map((id) => t.post.byId({ id })),
  );
  return <>{/* [...] */}</>;
};

预加载​

通过在 Suspense 组件渲染前预加载查询数据，可以提升 suspense 查询的性能（这种方法有时称为 "边渲染边获取"）。

备注
  • 预加载和边渲染边获取模式高度依赖于您使用的框架和路由方案。建议结合框架的路由文档和 @tanstack/react-query 文档 来理解如何实现这些模式
  • 如果您使用 Next.js，请查阅 服务端辅助工具 文档来实现服务端预加载

路由级预加载​

tsx
const utils = createTRPCQueryUtils({ queryClient, client: trpcClient });
// tanstack router/ react router loader
const loader = async (params: { id: string }) =>
  utils.post.byId.ensureQueryData({ id: params.id });
tsx
const utils = createTRPCQueryUtils({ queryClient, client: trpcClient });
// tanstack router/ react router loader
const loader = async (params: { id: string }) =>
  utils.post.byId.ensureQueryData({ id: params.id });

使用 usePrefetchQuery 实现组件级预加载​

tsx
import { trpc } from '../utils/trpc';
function PostViewPage(props: { postId: string }) {
  trpc.post.byId.usePrefetchQuery({ id: props.postId });
  return (
    <Suspense>
      <PostView postId={props.postId} />
    </Suspense>
  );
}
tsx
import { trpc } from '../utils/trpc';
function PostViewPage(props: { postId: string }) {
  trpc.post.byId.usePrefetchQuery({ id: props.postId });
  return (
    <Suspense>
      <PostView postId={props.postId} />
    </Suspense>
  );
}

使用 usePrefetchInfiniteQuery 实现组件级预加载​

tsx
import { trpc } from '../utils/trpc';
// will have to be passed to the child PostView `useSuspenseInfiniteQuery`
export const getNextPageParam = (lastPage) => lastPage.nextCursor;
function PostViewPage(props: { postId: string }) {
  trpc.post.all.usePrefetchInfiniteQuery({}, { getNextPageParam });
  return (
    <Suspense>
      <PostView postId={props.postId} />
    </Suspense>
  );
}
tsx
import { trpc } from '../utils/trpc';
// will have to be passed to the child PostView `useSuspenseInfiniteQuery`
export const getNextPageParam = (lastPage) => lastPage.nextCursor;
function PostViewPage(props: { postId: string }) {
  trpc.post.all.usePrefetchInfiniteQuery({}, { getNextPageParam });
  return (
    <Suspense>
      <PostView postId={props.postId} />
    </Suspense>
  );
}