useQueries()

Inofficiell Beta-översättning

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

Hooken useQueries låter dig hämta ett variabelt antal queries samtidigt med endast ett hook-anrop.

Huvudanvändningsområdet för denna hook är att kunna hämta flera queries, vanligtvis av samma typ. Till exempel: om du hämtar en lista med todo-id:n kan du sedan mappa över dem i en useQueries-hook som anropar en byId-endpoint för att hämta detaljer för varje todo.

notering

Även om det är möjligt att hämta flera olika typer i en useQueries-hook finns det inte mycket fördel jämfört med flera useQuery-anrop, såvida du inte använder suspense-alternativet. Anledningen är att useQueries kan utlösa suspense parallellt medan flera useQuery-anrop skulle ske i serie.

Användning

Hooken useQueries fungerar på samma sätt som @tanstack/query useQueries. Den enda skillnaden är att istället för att skicka ett objekt med en queries-array, skickar du en callback-funktion som tar emot en t-proxy och returnerar en array med queries.

tips

När du använder httpBatchLink eller wsLink kommer nedanstående att resultera i endast 1 HTTP-anrop till din server. Dessutom, om den underliggande proceduren använder något som Prismas findUnique(), kommer den automatiskt batch-köra och göra exakt 1 databasfråga.

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

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

Ange alternativ för enskilda queries

Du kan också skicka med vanliga query-alternativ som andra parameter till valfritt query-anrop i arrayen, t.ex. enabled, suspense, refetchOnWindowFocus osv. För fullständig översikt av alla tillgängliga alternativ, se dokumentationen för tanstack useQuery.

tsx
import { trpc } from './utils/trpc';
 
const Component = () => {
  const [post, greeting] = trpc.useQueries((t) => [
    t.post.byId({ id: '1' }, { enabled: false }),
    t.greeting({ text: 'world' }),
  ]);
 
  const onButtonClick = () => {
    post.refetch();
  };
 
  return (
    <div>
      <h1>{post.data && post.data.title}</h1>
      <p>{greeting.data?.message}</p>
      <button onClick={onButtonClick}>Click to fetch</button>
    </div>
  );
};

tsx
import { trpc } from './utils/trpc';
 
const Component = () => {
  const [post, greeting] = trpc.useQueries((t) => [
    t.post.byId({ id: '1' }, { enabled: false }),
    t.greeting({ text: 'world' }),
  ]);
 
  const onButtonClick = () => {
    post.refetch();
  };
 
  return (
    <div>
      <h1>{post.data && post.data.title}</h1>
      <p>{greeting.data?.message}</p>
      <button onClick={onButtonClick}>Click to fetch</button>
    </div>
  );
};

Kontext

Du kan också skicka med en valfri React Query-kontext för att åsidosätta standardinställningarna.

tsx
const [post, greeting] = trpc.useQueries(
  (t) => [t.post.byId({ id: '1' }), t.greeting({ text: 'world' })],
  myCustomContext,
);

tsx
const [post, greeting] = trpc.useQueries(
  (t) => [t.post.byId({ id: '1' }), t.greeting({ text: 'world' })],
  myCustomContext,
);