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 es idéntico al de @tanstack/query useQueries. La única diferencia es que pasas una función que devuelve un array de consultas en lugar de un array de consultas dentro de un parámetro de objeto.

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

Proporcionar opciones a consultas individuales

También puedes pasar cualquier opción normal de consulta al segundo parámetro de cualquiera de las llamadas de consulta 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
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>
  );
};

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