createTRPCQueryUtils

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 caso de uso para createTRPCQueryUtils es cuando necesitas utilizar los helpers fuera de un componente de React, por ejemplo en los loaders de react-router.

Similar a useUtils, createTRPCQueryUtils es una función que te da acceso a helpers que te permiten gestionar los datos en caché de las consultas que ejecutas mediante @trpc/react-query. Estos helpers son en realidad envoltorios delgados sobre los métodos del queryClient de @tanstack/react-query. Si necesitas información más detallada sobre opciones y patrones de uso para los helpers de useUtils que lo que ofrecemos aquí, enlazaremos a sus respectivas documentaciones de @tanstack/react-query para que puedas consultarlas según corresponda.

La diferencia entre useUtils y createTRPCQueryUtils es que useUtils es un hook de React que utiliza useQueryClient internamente. Esto significa que puede funcionar mejor dentro de componentes de React.

Si necesitas acceso directo al cliente, puedes usar el objeto client que pasaste a createTRPCQueryUtils durante su creación.

precaución

Debes evitar usar createTRPCQueryUtils en componentes de React. En su lugar, utiliza useUtils que es un hook de React que implementa useCallback y useQueryClient internamente.

Uso

createTRPCQueryUtils devuelve un objeto con todas las consultas disponibles que tienes en tus routers. Lo usas de la misma manera que tu objeto cliente trpc. Cuando accedes a una consulta, tendrás acceso a los helpers de consulta. Por ejemplo, supongamos que tienes un router post con una consulta all:

Ahora, en nuestro loader de ruta, cuando navegamos por el objeto que nos proporciona createTRPCQueryUtils y accedemos a la consulta post.all, ¡obtendremos acceso a nuestros helpers de consulta!

MyPage.tsx
tsx
import { QueryClient } from '@tanstack/react-query';
import { createTRPCQueryUtils, createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from './server';
 
const trpc = createTRPCReact<AppRouter>();
const trpcClient = trpc.createClient({ links: [] });
 
const queryClient = new QueryClient();
 
const clientUtils = createTRPCQueryUtils({ queryClient, client: trpcClient });
 
// This is a react-router loader
export async function loader() {
  const allPostsData = await clientUtils.post.all.ensureData(); // Fetches data if it doesn't exist in the cache
 
  return {
    allPostsData,
  };
}
 
// This is a react component
export function Component() {
  const loaderData = useLoaderData() as Awaited<ReturnType<typeof loader>>;
 
  const allPostQuery = trpc.post.all.useQuery(undefined, {
    initialData: loaderData.allPostsData, // Uses the data from the loader
  });
 
  return (
    <div>
      {allPostQuery.data.posts.map((post) => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

MyPage.tsx
tsx
import { QueryClient } from '@tanstack/react-query';
import { createTRPCQueryUtils, createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from './server';
 
const trpc = createTRPCReact<AppRouter>();
const trpcClient = trpc.createClient({ links: [] });
 
const queryClient = new QueryClient();
 
const clientUtils = createTRPCQueryUtils({ queryClient, client: trpcClient });
 
// This is a react-router loader
export async function loader() {
  const allPostsData = await clientUtils.post.all.ensureData(); // Fetches data if it doesn't exist in the cache
 
  return {
    allPostsData,
  };
}
 
// This is a react component
export function Component() {
  const loaderData = useLoaderData() as Awaited<ReturnType<typeof loader>>;
 
  const allPostQuery = trpc.post.all.useQuery(undefined, {
    initialData: loaderData.allPostsData, // Uses the data from the loader
  });
 
  return (
    <div>
      {allPostQuery.data.posts.map((post) => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

nota

Si estuvieras usando Remix Run o SSR, no reutilizarías el mismo queryClient para cada solicitud. En cambio, crearías un nuevo queryClient para cada solicitud para evitar fugas de datos entre solicitudes.

Utilidades

Al igual que useUtils, createTRPCQueryUtils te da acceso al mismo conjunto de helpers, incluyendo queryOptions e infiniteQueryOptions. La única diferencia es que debes pasar los objetos queryClient y client.

Puedes verlos en la página de useUtils.