Saltar al contenido principal
Versión: 11.x
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 →

Cliente tRPC

El cliente tRPC "Vanilla" te permite llamar a los procedimientos de tu API como si fueran funciones locales, ofreciendo una experiencia de desarrollo fluida.

ts
import { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from './server';
 
const client = createTRPCClient<AppRouter>({
  links: [httpBatchLink({ url: 'http://localhost:3000' })],
});
 
const bilbo = await client.getUser.query('id_bilbo');
// => { id: 'id_bilbo', name: 'Bilbo' };
ts
import { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from './server';
 
const client = createTRPCClient<AppRouter>({
  links: [httpBatchLink({ url: 'http://localhost:3000' })],
});
 
const bilbo = await client.getUser.query('id_bilbo');
// => { id: 'id_bilbo', name: 'Bilbo' };

¿Cuándo usar el cliente Vanilla?​

Es probable que uses este cliente en dos escenarios:

  • Con un framework de frontend para el que no exista una integración oficial

  • Con un servicio backend separado escrito en TypeScript.

¿Cuándo NO usar el cliente Vanilla?​

  • Aunque puedes usar este cliente para llamar a procedimientos desde un componente de React, normalmente deberías usar nuestra Integración de TanStack React Query. Ofrece muchas características adicionales como gestión de estados de carga y errores, almacenamiento en caché e invalidación.

  • No recomendamos usar este cliente para llamar procedimientos dentro de la misma instancia de API, ya que la invocación debe pasar por la capa de red. Para recomendaciones completas sobre cómo invocar procedimientos en la API actual, puedes leer más aquí.