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 réside dans le fait que vous passez une fonction renvoyant un tableau de requêtes, plutôt qu'un tableau de requêtes à l'intérieur d'un paramètre objet.

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

Options individuelles pour les requêtes

Vous pouvez également passer n'importe quelle option de requête standard en deuxième paramètre de chaque appel de requête dans le tableau, telles que enabled, suspense, refetchOnWindowFocus, etc. Pour une vue d'ensemble complète de toutes les options disponibles, consultez la documentation 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>
  );
};

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