Cliente Vanilla

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

La magia de tRPC es realizar llamadas API fuertemente tipadas sin depender de generación de código. Con proyectos TypeScript de pila completa, ¡puedes importar tipos del servidor directamente al cliente! Esta es una parte vital de cómo funciona tRPC.

Importa el tipo AppRouter en tu cliente desde el archivo donde se define tu enrutador raíz de tRPC. Este único tipo representa la firma de tipos de toda tu API.

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

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

Las palabras clave import type te permiten importar desde cualquier archivo TypeScript en tu sistema de archivos. Además, import type solo puede importar tipos, NO código. Por lo tanto, no hay peligro de importar accidentalmente código del lado del servidor en tu cliente. Todas las llamadas a import type son siempre eliminadas por completo de tu paquete JavaScript compilado (fuente).

Inicializar un cliente tRPC

Crea un cliente con seguridad de tipos con el método createTRPCClient de @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',
});

Como puedes ver, pasamos AppRouter como un argumento de tipo de createTRPCClient. Esto devuelve una instancia de client fuertemente tipada:

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