Saltar al contenido principal
Versión: 11.x

Configurar un cliente tRPC

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 →

1. Instalar la biblioteca de cliente tRPC​

Utiliza tu gestor de paquetes preferido para instalar @trpc/client, y también instala @trpc/server que contiene algunos tipos necesarios.

npm install @trpc/server @trpc/client
Agentes de IA

Si utilizas un agente de IA para programación, instala habilidades de tRPC para una mejor generación de código:

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

2. Importa tu App Router​

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 →

Importa el tipo AppRouter en la aplicación cliente. Este tipo contiene la estructura completa de tu API.

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

Al usar import type aseguras que la referencia será eliminada durante la compilación, evitando importar código del servidor en el cliente accidentalmente. Para más información, consulta la documentación de TypeScript.

3. Inicializa el cliente tRPC​

Crea un cliente tRPC con el método createTRPCClient, y añade un arreglo links con un enlace terminador apuntando a tu API. Para aprender más sobre los enlaces de tRPC, consulta aquí.

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. Usa el cliente tRPC​

Internamente, esto crea un Proxy de JavaScript tipado que te permite interactuar con tu API tRPC de manera completamente segura en cuanto a tipos:

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

¡Estás listo!