useQueries()

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 →

Le hook useQueries permet d'effectuer simultanément un nombre variable de requêtes en utilisant un seul appel de hook.

Le principal cas d'usage de ce hook est de récupérer plusieurs requêtes, généralement du même type. Par exemple, après avoir obtenu une liste d'identifiants de tâches (todo ids), vous pouvez les mapper dans un hook useQueries en appelant un endpoint byId qui récupérera les détails de chaque tâche.

note

Bien qu'il soit possible de récupérer plusieurs types dans un hook useQueries, cela n'offre pas d'avantage significatif par rapport à l'utilisation de multiples appels useQuery, sauf si vous utilisez l'option suspense. En effet, useQueries peut déclencher le suspense en parallèle tandis que plusieurs appels useQuery le feraient en cascade.

Utilisation

Le hook useQueries est identique à celui de @tanstack/query useQueries. La seule différence est qu'au lieu de passer un objet avec un tableau queries, vous passez une fonction de rappel qui reçoit un proxy t et retourne un tableau de requêtes.

astuce

Lorsque vous utilisez httpBatchLink ou wsLink, l'exemple ci-dessous ne générera qu'un seul appel HTTP vers votre serveur. De plus, si la procédure sous-jacente utilise une fonction comme findUnique() de Prisma, elle regroupera automatiquement les requêtes et n'effectuera qu'une seule interrogation de base de données.

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

Options individuelles pour les requêtes

Vous pouvez passer n'importe quelle option de requête standard comme second paramètre des appels dans le tableau, notamment enabled, suspense, refetchOnWindowFocus, etc. Pour la liste complète des options disponibles, consultez la documentation 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>
  );
};

Contexte

Vous pouvez également passer un contexte React Query optionnel pour remplacer celui par défaut.

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