Saltar al contenido principal

Anunciando tRPC v11

· 7 min de lectura
tRPC
tRPC
El equipo de 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 →

Aunque tRPC v11 ha estado listo para producción desde hace mucho tiempo a través de la etiqueta @next, nos hemos vuelto un poco adictos a añadir nuevas funciones sin ser estrictos con el versionado semántico. ¡Hoy estamos emocionados de finalmente quitarnos la venda y anunciar el lanzamiento oficial de tRPC v11!

Desde nuestro último lanzamiento de versión principal en noviembre de 2022, la comunidad de tRPC ha experimentado un crecimiento sustancial:

Con el lanzamiento de tRPC v11, nos complace compartir que v11 ya se está utilizando en producción en muchos proyectos grandes de TypeScript gracias a su evolución estable en nuestro canal @next

Para nuevos proyectos, puedes comenzar con una aplicación de ejemplo para aprender sobre tRPC v11. Para proyectos que aún usan tRPC v10, visita la guía de migración a v11.

Resumen de cambios​

v11 es en gran medida compatible con versiones anteriores de v10, pero trae muchas características nuevas y mejoras. Estos son los aspectos más destacados:

Soporte para TanStack Query v5​

Cuando se lanzó TanStack Query v5, requirió algunos cambios de ruptura en la integración de react-query de tRPC. Esto ha estado disponible desde bastante temprano a través de la etiqueta @next, pero ahora se lanza oficialmente. Muchos proyectos ya han optado por actualizar y están disfrutando de los beneficios del soporte completo para React Suspense y muchas otras mejoras. Para orientación sobre cómo migrar tu código de cliente React de tRPC, puedes seguir la propia guía de migración de TanStack Query.

Nueva integración con TanStack React Query​

Ver la publicación del blog

Soporte para FormData / Tipos de contenido no JSON​

Una de las funciones más solicitadas es la capacidad de enviar y recibir más que solo datos JSON. Con tRPC v11, ahora puedes enviar y recibir datos en varios tipos de contenido no JSON, FormData, y tipos binarios como Blob, File y Uint8Array. Puedes encontrar un ejemplo de cómo usar estos tipos de contenido aquí

ts
import { publicProcedure, router } from './trpc';
import { octetInputParser } from '@trpc/server/http';
import { z } from 'zod';
 
const appRouter = router({
  formData: publicProcedure
    .input(z.instanceof(FormData))
    .mutation(async ({ input }) => {
                        
(parameter) input: FormData
    }),
  file: publicProcedure
    .input(octetInputParser)
    .mutation(async ({ input }) => {
                        
(parameter) input: ReadableStream<any>
    }),
});
ts
import { publicProcedure, router } from './trpc';
import { octetInputParser } from '@trpc/server/http';
import { z } from 'zod';
 
const appRouter = router({
  formData: publicProcedure
    .input(z.instanceof(FormData))
    .mutation(async ({ input }) => {
                        
(parameter) input: FormData
    }),
  file: publicProcedure
    .input(octetInputParser)
    .mutation(async ({ input }) => {
                        
(parameter) input: ReadableStream<any>
    }),
});

Componentes de Servidor de React / App Router de Next.js​

Aunque has podido usar tRPC con Next.js App Router desde el primer día, ya sea:

La transición entre ambos enfoques ha presentado ciertas dificultades. Los patrones de revalidación se mezclan al mantener diferentes formas de obtener datos, resultando en una experiencia de desarrollo menos ideal que no cumple con los estándares de tRPC.

Para solucionarlo, hemos mejorado el soporte para React Server Components (RSC) y añadido helpers de prefetch para facilitar el aprovechamiento del poder de los RSC ejecutándose exclusivamente en el servidor, combinado con la altamente dinámica caché del lado cliente de React Query. Ahora puedes iniciar la ejecución de un procedimiento en el servidor dentro de un RSC, continuar con la promesa pendiente en el cliente, e hidratar automáticamente la caché de React Query en el lado cliente. Esto te permite construir aplicaciones altamente dinámicas sin sufrir retrasos en cascada entre servidor y cliente. Puedes leer más en nuestra documentación de Server Components.

Además de estos nuevos patrones de prefetch, hemos añadido soporte experimental para funciones de servidor. Puedes leer más sobre esto en nuestro blog post. Planeamos seguir iterando en esta característica a medida que las funciones de servidor se conviertan en un patrón más establecido en el ecosistema.

También hemos colaborado con el equipo de TanStack para ayudar a diseñar las APIs de sus funciones de servidor. Nuestro objetivo es extraer partes del potente sistema de middleware de tRPC en un paquete separado que pueda usarse en todo el ecosistema.

Respuestas en Streaming para Queries y Mutations​

Hemos introducido httpBatchStreamLink, que permite transmitir respuestas de queries en streaming. Esto es útil al trabajar con grandes conjuntos de datos o cuando necesitas procesar datos en tiempo real y enviarlos al frontend progresivamente. No es un reemplazo para suscripciones, sino otra opción en tu caja de herramientas.

ts
// @filename: server.ts
import { publicProcedure, router } from './trpc';
 
const appRouter = router({
  examples: {
    iterable: publicProcedure.query(async function* () {
      let i = 0;
      while (true) {
        await new Promise((resolve) => setTimeout(resolve, 500));
        yield i++;
      }
    }),
  },
});
 
export type AppRouter = typeof appRouter;
 
 
// @filename: client.ts
import { createTRPCClient, httpBatchStreamLink } from '@trpc/client';
import type { AppRouter } from './server';
 
const trpc = createTRPCClient<AppRouter>({
  links: [
    httpBatchStreamLink({
      url: 'http://localhost:3000',
    }),
  ],
});
const iterable = await trpc.examples.iterable.query();
         
const iterable: AsyncIterable<number, never, unknown>
 
for await (const value of iterable) {
  console.log('Iterable:', value);
                            
const value: number
}
ts
// @filename: server.ts
import { publicProcedure, router } from './trpc';
 
const appRouter = router({
  examples: {
    iterable: publicProcedure.query(async function* () {
      let i = 0;
      while (true) {
        await new Promise((resolve) => setTimeout(resolve, 500));
        yield i++;
      }
    }),
  },
});
 
export type AppRouter = typeof appRouter;
 
 
// @filename: client.ts
import { createTRPCClient, httpBatchStreamLink } from '@trpc/client';
import type { AppRouter } from './server';
 
const trpc = createTRPCClient<AppRouter>({
  links: [
    httpBatchStreamLink({
      url: 'http://localhost:3000',
    }),
  ],
});
const iterable = await trpc.examples.iterable.query();
         
const iterable: AsyncIterable<number, never, unknown>
 
for await (const value of iterable) {
  console.log('Iterable:', value);
                            
const value: number
}

Definiciones Abreviadas de Routers​

Hemos introducido una nueva sintaxis abreviada para definir tu router, simplificando el proceso de creación de rutas. Documentación

ts
const appRouter = router({
  // Shorthand plain object for creating a sub-router
  nested1: {
    proc: publicProcedure.query(() => '...'),
  },
  // Equivalent of:
  nested2: router({
    proc: publicProcedure.query(() => '...'),
  }),
});
ts
const appRouter = router({
  // Shorthand plain object for creating a sub-router
  nested1: {
    proc: publicProcedure.query(() => '...'),
  },
  // Equivalent of:
  nested2: router({
    proc: publicProcedure.query(() => '...'),
  }),
});

Suscripciones: Server-Sent Events y otras Mejoras​

  • tRPC v11 introduce una nueva forma de manejar suscripciones usando Server-Sent Events (SSE). Es una excelente manera de manejar actualizaciones en tiempo real sin necesidad de WebSockets más complejos. Recomendamos usar este enfoque como primera opción.

  • Hemos añadido soporte para generadores JavaScript en suscripciones. Esto permite escribir manejadores de suscripción más complejos que pueden producir múltiples valores en el tiempo y limpiar al finalizar, de forma muy natural en JS.

  • Las suscripciones ahora admiten validación de salida, mejorando la seguridad de tipos en tus manejadores.

Adiós al modo .interop() de v9​

En tRPC v10, introdujimos el modo .interop() para facilitar la migración desde v9. Con tRPC v11, hemos eliminado el modo .interop(). Si aún usas .interop(), puedes seguir la guía de migración v10 para completar tu transición a las APIs actuales de tRPC.

Migrando a v11​

Si actualmente usas tRPC v10, sigue la guía de migración para actualizar a v11. La guía cubre todos los cambios disruptivos y nuevas características de v11.

¡Gracias!​

De parte de todo el Core Team de tRPC, gracias por usar y apoyar tRPC.