Suspense

資訊

• 確保您使用最新版本的 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 <>{/* [...] */}</>;
};