Suspense

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

info

• Assurez-vous d'utiliser la dernière version de React
• Si vous utilisez Suspense avec le SSR automatique de tRPC dans Next.js, la page entière plantera côté serveur en cas d'échec de requête, même avec un <ErrorBoundary />

Utilisation

astuce

useSuspenseQuery et useSuspenseInfiniteQuery retournent toutes deux un [data, query]-tuple, facilitant l'utilisation directe des données et le renommage descriptif des variables

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