useQueries()

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

El hook useQueries permite obtener un número variable de consultas simultáneamente usando una sola llamada de hook.

El caso de uso principal para este hook es obtener múltiples consultas, generalmente del mismo tipo. Por ejemplo, si obtienes una lista de IDs de tareas pendientes, luego puedes mapearlos en un hook useQueries llamando a un endpoint byId que recuperaría los detalles de cada tarea.

nota

Si bien es posible obtener múltiples tipos en un hook useQueries, no hay mucha ventaja comparado con usar múltiples llamadas useQuery, a menos que uses la opción suspense, ya que useQueries puede activar suspense en paralelo mientras que múltiples llamadas useQuery lo harían en cascada.

Uso

El hook useQueries funciona igual que el de @tanstack/query useQueries. La única diferencia es que, en lugar de pasar un objeto con un array queries, pasas una función callback que recibe un proxy t y devuelve un array de consultas.

consejo

Cuando usas httpBatchLink o wsLink, lo siguiente resultará en solo 1 llamada HTTP a tu servidor. Adicionalmente, si el procedimiento subyacente usa algo como findUnique() de Prisma, agrupará automáticamente y hará exactamente 1 consulta a la base de datos.

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

Proporcionar opciones a consultas individuales

También puedes pasar cualquier opción normal de consulta al segundo parámetro de cualquier llamada en el array, como enabled, suspense, refetchOnWindowFocus, etc. Para una descripción completa de todas las opciones disponibles, consulta la documentación de 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>
  );
};

Contexto

También puedes pasar un contexto opcional de React Query para sobrescribir el predeterminado.

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