Aller au contenu principal

Annonce de tRPC v11

· 6 min de lecture
tRPC
tRPC
L'équipe tRPC
Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Bien que tRPC v11 soit prêt pour la production depuis longtemps via le tag @next, nous avons pris l'habitude d'ajouter constamment de nouvelles fonctionnalités sans nous astreindre strictement au versionnage sémantique. Aujourd'hui, nous sommes ravis d'enfin retirer le pansement et d'annoncer la sortie officielle de tRPC v11 !

Depuis notre dernière version majeure en novembre 2022, la communauté tRPC a connu une croissance substantielle :

Avec le lancement de tRPC v11, nous sommes heureux de partager que v11 est déjà utilisé en production par de nombreux projets TypeScript d'envergure, grâce à son évolution stable sur notre canal @next.

Pour les nouveaux projets, vous pouvez démarrer avec une application exemple pour découvrir tRPC v11. Pour les projets encore sur tRPC v10, consultez le guide de migration vers v11.

Vue d'ensemble des changements​

v11 est une version largement rétrocompatible avec v10, mais elle apporte de nombreuses nouvelles fonctionnalités et améliorations. Voici les points forts :

Prise en charge de TanStack Query v5​

La sortie de TanStack Query v5 a nécessité des changements cassants dans l'intégration react-query de tRPC. Disponible assez tôt via le tag @next, elle est désormais officiellement publiée. De nombreux projets ont déjà choisi de mettre à niveau et profitent du support complet de React Suspense ainsi que de nombreuses autres améliorations. Pour migrer votre code client React tRPC, suivez le guide de migration de TanStack Query.

Nouvelle intégration TanStack React Query​

Voir l'article de blog

Prise en charge de FormData / Types de contenu non-JSON​

L'une de nos fonctionnalités les plus demandées est la possibilité d'envoyer et de recevoir plus que de simples données JSON. Avec tRPC v11, vous pouvez désormais échanger des données dans divers types de contenu non-JSON, FormData, et types binaires comme Blob, File et Uint8Array. Un exemple d'utilisation est disponible ici.

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>
    }),
});

Composants Serveur React / Routeur d'application Next.js​

Bien que vous ayez pu utiliser tRPC avec le routeur d'application de Next.js depuis le premier jour, soit :

La passerelle entre les deux approches présentait quelques aspérités. Les modèles de revalidation devenaient hybrides lorsqu'il fallait gérer différents modes de récupération de données, ce qui entraînait une expérience développeur inférieure aux standards habituels de tRPC.

Pour résoudre cela, nous avons amélioré la prise en charge des React Server Components (RSC) et ajouté des helpers de préchargement pour exploiter plus facilement la puissance des RSC exécutés exclusivement côté serveur, tout en bénéficiant du cache dynamique de React Query côté client. Vous pouvez désormais démarrer l'exécution d'une procédure côté serveur dans un RSC, récupérer la promesse en attente côté client, et hydrater automatiquement le cache React Query. Cela permet de créer des applications hautement dynamiques sans subir les goulots d'étranglement serveur-client. Consultez notre documentation sur les Server Components.

En complément de ces nouveaux modèles de préchargement, nous avons ajouté une prise en charge expérimentale des fonctions serveur. Lisez-en plus dans notre article de blog. Nous prévoyons d'itérer sur cette fonctionnalité à mesure que les fonctions serveur deviendront un modèle établi dans l'écosystème.

Nous avons également collaboré avec l'équipe TanStack pour concevoir les APIs de leurs fonctions serveur. Notre objectif est d'extraire des parties du puissant système de middleware de tRPC dans un package séparé, utilisable dans tout l'écosystème.

Streaming des réponses depuis les queries et mutations​

Nous avons introduit le httpBatchStreamLink, qui permet de streamer les réponses des queries. C'est particulièrement utile pour les jeux de données volumineux ou lorsque vous devez traiter des données en temps réel et les envoyer progressivement au frontend. Ce n'est pas un remplacement des subscriptions, mais un outil supplémentaire à votre disposition.

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
}

Syntaxe raccourcie pour les définitions de routeur​

Une nouvelle syntaxe raccourcie pour définir votre routeur simplifie la création de routes. Documentation

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(() => '...'),
  }),
});

Abonnements : Server-Sent Events et autres améliorations​

  • tRPC v11 introduit un nouveau mode de gestion des abonnements via les Server-Sent Events (SSE). Une solution idéale pour les mises à jour temps réel sans la complexité des WebSockets. Nous recommandons désormais cette approche en priorité.

  • Nous avons ajouté la prise en charge des générateurs JavaScript dans les abonnements. Cela permet d'écrire des gestionnaires d'abonnement complexes produisant plusieurs valeurs dans le temps, avec un nettoyage automatique des effets de bord, dans un style parfaitement adapté à JavaScript.

  • Les abonnements prennent désormais en charge les validateurs de sortie, améliorant la type-safety de vos gestionnaires.

Adieu le mode .interop() de la v9​

Dans tRPC v10, nous avions introduit le mode .interop() pour faciliter la migration depuis la v9. Avec tRPC v11, nous avons supprimé le mode .interop(). Si vous utilisez encore le mode .interop(), vous pouvez utiliser le guide de migration v10 pour achever votre transition vers les APIs utilisées par tRPC aujourd'hui.

Migration vers la v11​

Si vous utilisez actuellement tRPC v10, suivez le guide de migration pour passer à la v11. Ce guide couvre toutes les breaking changes et nouvelles fonctionnalités.

Merci !​

De la part de toute l'équipe core de tRPC, merci d'utiliser et de soutenir notre bibliothèque.