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 är densamma som @tanstack/query useQueries. Den enda skillnaden är att du skickar in en funktion som returnerar en array av queries istället för en array av queries inuti ett parameterobjekt.

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
const Component = (props: { postIds: string[] }) => {
  const postQueries = trpc.useQueries((t) =>
    props.postIds.map((id) => t.post.byId({ id })),
  );
  return <>{/* [...] */}</>;
};

tsx
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 till den andra parametern för något av query-anropen i arrayen, såsom enabled, suspense, refetchOnWindowFocus, etc. För en komplett översikt över alla tillgängliga alternativ, se dokumentationen för tanstack useQuery.

tsx
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
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,
);