Hoppa till huvudinnehållet
Version: 10.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.

bash
npm install @trpc/client @trpc/server
bash
npm install @trpc/client @trpc/server

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.

ts
import type { AppRouter } from '../server/router';
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 createTRPCProxyClient och lägg till en links-array med en terminerande länk som pekar mot ditt API. För mer information om tRPC-länkar, läs mer här.

client.ts
ts
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from '../path/to/server/trpc';
const client = createTRPCProxyClient<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 { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from '../path/to/server/trpc';
const client = createTRPCProxyClient<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!