createTRPCQueryUtils

Inofficiell Beta-översättning

Denna sida har översatts av PageTurner AI (beta). Inte officiellt godkänd av projektet. Hittade du ett fel? Rapportera problem →

Användningsområdet för createTRPCQueryUtils är när du behöver använda hjälpfunktionerna utanför en React-komponent, till exempel i react-router's loaders.

Precis som useUtils ger createTRPCQueryUtils dig tillgång till hjälpfunktioner som låter dig hantera cachad data för queries du kör via @trpc/react-query. Dessa funktioner är tunna wrappers runt queryClient-metoder från @tanstack/react-query. Om du vill ha mer djupgående information om alternativ och användningsmönster för useUtils-hjälpfunktioner än vad vi ger här, länkar vi till respektive dokumentation i @tanstack/react-query.

Skillnaden mellan useUtils och createTRPCQueryUtils är att useUtils är en React-hook som använder useQueryClient under huven. Det gör att den fungerar bättre inom React-komponenter.

Om du behöver direktåtkomst till klienten kan du använda client-objektet du skickade till createTRPCQueryUtils vid skapandet.

försiktighet

Undvik att använda createTRPCQueryUtils i React-komponenter. Använd istället useUtils som är en React-hook med useCallback och useQueryClient under huven.

Användning

createTRPCQueryUtils returnerar ett objekt med alla tillgängliga queries i dina routers. Du använder det på samma sätt som ditt trpc-klientobjekt. När du når en query får du tillgång till dess hjälpfunktioner. Exempel: säg att du har en post-router med en all-query:

Nu i vår route-loader, när vi navigerar genom objektet som createTRPCQueryUtils ger oss och når post.all-queryn, får vi tillgång till våra query-hjälpfunktioner!

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

notering

Om du använder Remix Run eller SSR bör du inte återanvända samma queryClient för varje request. Skapa istället en ny queryClient per request för att undvika dataläckage mellan requests.

Hjälpfunktioner

Precis som useUtils ger createTRPCQueryUtils dig tillgång till samma uppsättning hjälpfunktioner, inklusive queryOptions och infiniteQueryOptions. Den enda skillnaden är att du måste skicka med queryClient och client-objekten.

Du hittar dem på useUtils-sidan.