Hoppa till huvudinnehållet
Version: 11.x

Suspense

Inofficiell Beta-översättning

Denna sida har översatts av PageTurner AI (beta). Inte officiellt godkänd av projektet. Hittade du ett fel? Rapportera problem →

info
  • Se till att du använder den senaste versionen av React
  • Om du använder suspense med tRPC:s automatiska SSR i Next.js kommer hela sidan att krascha på servern vid ett misslyckat query, även om du har en <ErrorBoundary />

Användning​

tips

useSuspenseQuery & useSuspenseInfiniteQuery returnerar båda en [data, query]-tupel, vilket gör det enkelt att direkt använda dina data och döpa om variabeln till något beskrivande

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()​

Suspense-ekvivalent för useQueries().

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

Prefetching​

Prestandan för suspense-queries kan förbättras genom att förhämta query-datan innan Suspense-komponenten renderas (kallas ibland "render-as-you-fetch").

notering
  • Prefetching och render-as-you-fetch-modellen är starkt beroende av ditt ramverk och din router. Vi rekommenderar att du läser din routers dokumentation tillsammans med @tanstack/react-query-dokumentationen för att förstå hur dessa mönster implementeras.
  • Om du använder Next.js, se dokumentationen om Server-Side Helpers för server-side prefetching.

Prefetching på ruttnivå​

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 });

Prefetching på komponentnivå med 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>
  );
}

Prefetching på komponentnivå med 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>
  );
}