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

useQueries-hooken fungerar på samma sätt 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 objektparameter.

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