Vanilla-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 →

tRPC:s magi ligger i att kunna göra strongly typed API-anrop utan att förlita sig på kodgenerering. Med fullstack TypeScript-projekt kan du direkt importera typer från servern till klienten! Detta är en avgörande del av hur tRPC fungerar.

Importera AppRouter-typen till din klient från filen där din rot-tRPC-router är definierad. Denna enda typ representerar typsignaturen för hela ditt API.

client.ts
ts
import type { AppRouter } from '../path/to/server/trpc';

client.ts
ts
import type { AppRouter } from '../path/to/server/trpc';

Nyckelorden import type låter dig importera från vilken TypeScript-fil som helst på ditt filsystem. Dessutom kan import type endast importera typer, INTE kod. Så det finns ingen risk att av misstag importera serverkod till din klient. Alla anrop till import type är alltid helt borttagna från din kompilerade JavaScript-bundle (källa).

Initiera en tRPC-klient

Skapa en typesäker klient med metoden createTRPCClient från @trpc/client:

client.ts
ts
// pages/index.tsx
import { createTRPCClient } from '@trpc/client';
import type { AppRouter } from '../path/to/server/trpc';
const client = createTRPCClient<AppRouter>({
  url: 'http://localhost:5000/trpc',
});

client.ts
ts
// pages/index.tsx
import { createTRPCClient } from '@trpc/client';
import type { AppRouter } from '../path/to/server/trpc';
const client = createTRPCClient<AppRouter>({
  url: 'http://localhost:5000/trpc',
});

Som du ser skickade vi AppRouter som ett typargument till createTRPCClient. Detta returnerar en strongly typed client-instans:

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

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