Hoppa till huvudinnehållet
Version: 11.x

Konfigurera en tRPC-klient

Inofficiell Beta-översättning

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

1. Installera tRPC Client-biblioteket​

Använd din föredragna pakethanterare för att installera @trpc/client-biblioteket. Installera även @trpc/server som innehåller vissa nödvändiga typer.

npm install @trpc/server @trpc/client
AI-agenter

Om du använder en AI-kodningsagent, installera tRPC-färdigheter för bättre kodgenerering:

bash
npx @tanstack/intent@latest install
bash
npx @tanstack/intent@latest install

2. Importera din App Router​

Inofficiell Beta-översättning

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

Importera din AppRouter-typ till klientapplikationen. Den här typen beskriver strukturen för hela ditt API.

utils/trpc.ts
ts
import type { AppRouter } from '../server/router';
utils/trpc.ts
ts
import type { AppRouter } from '../server/router';
tips

Genom att använda import type säkerställer du att referensen tas bort vid kompilering, vilket innebär att du inte av misstag importerar serverkod till din klient. För mer information, se dokumentationen för TypeScript.

3. Initiera tRPC-klienten​

Skapa en tRPC-klient med metoden createTRPCClient och lägg till en links-array med en avslutande länk som pekar mot ditt API. Läs mer om tRPC-länkar här.

client.ts
ts
import { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from './server';
 
const client = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000/trpc',
 
      // You can pass any HTTP headers you wish here
      async headers() {
        return {
          authorization: getAuthCookie(),
        };
      },
    }),
  ],
});
client.ts
ts
import { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from './server';
 
const client = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000/trpc',
 
      // You can pass any HTTP headers you wish here
      async headers() {
        return {
          authorization: getAuthCookie(),
        };
      },
    }),
  ],
});

4. Använd tRPC-klienten​

Internt skapar detta ett typat JavaScript Proxy som låter dig interagera med ditt tRPC-API på ett fullständigt typsäkert sätt:

client.ts
ts
const bilbo = await client.getUser.query('id_bilbo');
// => { id: 'id_bilbo', name: 'Bilbo' };
 
const frodo = await client.createUser.mutate({ name: 'Frodo' });
// => { id: 'id_frodo', name: 'Frodo' };
client.ts
ts
const bilbo = await client.getUser.query('id_bilbo');
// => { id: 'id_bilbo', name: 'Bilbo' };
 
const frodo = await client.createUser.mutate({ name: 'Frodo' });
// => { id: 'id_frodo', name: 'Frodo' };

Klart!