createTRPCQueryUtils

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 cas d'utilisation de createTRPCQueryUtils survient lorsque vous devez utiliser les utilitaires en dehors d'un composant React, par exemple dans les loaders de react-router.

Similaire à useUtils, createTRPCQueryUtils est une fonction qui vous donne accès à des utilitaires permettant de gérer les données en cache des requêtes exécutées via @trpc/react-query. Ces utilitaires sont en réalité des wrappers légers autour des méthodes du queryClient de @tanstack/react-query. Pour des informations plus approfondies sur les options et les patterns d'utilisation des utilitaires useUtils que ce que nous fournissons ici, nous renverrons vers la documentation correspondante de @tanstack/react-query que vous pourrez consulter.

La différence entre useUtils et createTRPCQueryUtils est que useUtils est un hook React qui utilise useQueryClient en interne. Cela signifie qu'il fonctionne mieux au sein des composants React.

Si vous avez besoin d'accéder directement au client, vous pouvez utiliser l'objet client que vous avez passé à createTRPCQueryUtils lors de sa création.

attention

Vous devriez éviter d'utiliser createTRPCQueryUtils dans des composants React. Utilisez plutôt useUtils, qui est un hook React implémentant useCallback et useQueryClient en interne.

Utilisation

createTRPCQueryUtils renvoie un objet contenant toutes les requêtes disponibles de vos routeurs. Vous l'utilisez de la même manière que votre objet client trpc. Lorsque vous accédez à une requête, vous obtenez les utilitaires associés. Par exemple, supposons que vous ayez un routeur post avec une requête all :

Dans notre composant, lorsque nous naviguons dans l'objet fourni par createTRPCQueryUtils et que nous accédons à la requête post.all, nous obtenons alors les utilitaires de requête !

MyPage.tsx
tsx
import { QueryClient } from '@tanstack/react-query';
import { createTRPCQueryUtils, createTRPCReact } from '@trpc/react-query';
import { useLoaderData } from 'react-router-dom';
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({
    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 { useLoaderData } from 'react-router-dom';
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({
    initialData: loaderData.allPostsData, // Uses the data from the loader
  });
  return (
    <div>
      {allPostQuery.data.posts.map((post) => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

note

Si vous utilisez Remix Run ou du SSR, vous ne devriez pas réutiliser le même queryClient pour chaque requête. Créez plutôt un nouveau queryClient par requête pour éviter toute fuite de données entre les requêtes.

Assistants

Tout comme useUtils, createTRPCQueryUtils vous donne accès au même ensemble d'utilitaires. La seule différence est que vous devez passer les objets queryClient et client.

Vous pouvez les consulter sur la page useUtils.