Aller au contenu principal
Version : 11.x

Transformateurs de données

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 →

Vous pouvez sérialiser les données de réponse et les arguments d'entrée. Les transformateurs doivent être ajoutés à la fois côté serveur et client.

Utilisation de superjson​

SuperJSON nous permet d'utiliser de manière transparente des objets standards comme Date, Map ou Set à travers le réseau entre le serveur et le client. Vous pouvez ainsi retourner ces types depuis votre résolveur d'API et les utiliser côté client sans avoir à recréer les objets depuis JSON.

Procédure​

1. Installation​

bash
yarn add superjson
bash
yarn add superjson

2. Ajout à votre initTRPC​

server/routers/_app.ts
ts
import { initTRPC } from '@trpc/server';
import superjson from 'superjson';
 
export const t = initTRPC.create({
  transformer: superjson,
});
server/routers/_app.ts
ts
import { initTRPC } from '@trpc/server';
import superjson from 'superjson';
 
export const t = initTRPC.create({
  transformer: superjson,
});

3. Ajout à httpLink(), wsLink(), etc.​

TypeScript vous guidera vers l'endroit où ajouter transformer dès que vous l'aurez ajouté à l'objet initTRPC

createTRPCClient():

src/app/_trpc/client.ts
ts
import { createTRPCClient, httpLink } from '@trpc/client';
import type { AppRouter } from './server';
import superjson from 'superjson';
 
export const client = createTRPCClient<AppRouter>({
  links: [
    httpLink({
      url: 'http://localhost:3000',
      transformer: superjson,
    }),
  ],
});
src/app/_trpc/client.ts
ts
import { createTRPCClient, httpLink } from '@trpc/client';
import type { AppRouter } from './server';
import superjson from 'superjson';
 
export const client = createTRPCClient<AppRouter>({
  links: [
    httpLink({
      url: 'http://localhost:3000',
      transformer: superjson,
    }),
  ],
});

Utilisation de devalue​

Devalue fonctionne comme superjson, en privilégiant la performance et la compacité des données transmises, mais au détriment d'un contenu moins lisible par un humain.

Procédure​

1. Installation​

bash
yarn add devalue
bash
yarn add devalue

2. Ajout à utils/trpc.ts​

Nous utilisons ici parse et stringify car ils atténuent les risques XSS.

utils/trpc.ts
ts
import { parse, stringify } from 'devalue';
 
// [...]
 
export const transformer = {
  deserialize: (object: any) => parse(object),
  serialize: (object: any) => stringify(object),
};
utils/trpc.ts
ts
import { parse, stringify } from 'devalue';
 
// [...]
 
export const transformer = {
  deserialize: (object: any) => parse(object),
  serialize: (object: any) => stringify(object),
};

3. Ajout à votre initTRPC​

server/routers/_app.ts
ts
import { initTRPC } from '@trpc/server';
import { transformer } from '../../utils/trpc';
 
export const t = initTRPC.create({
  transformer,
});
server/routers/_app.ts
ts
import { initTRPC } from '@trpc/server';
import { transformer } from '../../utils/trpc';
 
export const t = initTRPC.create({
  transformer,
});

4. Ajout à httpLink(), wsLink(), etc.​

TypeScript vous guidera vers l'endroit où ajouter transformer dès que vous l'aurez ajouté à l'objet initTRPC

createTRPCClient():

src/app/_trpc/client.ts
ts
import { createTRPCClient, httpLink } from '@trpc/client';
import type { AppRouter } from './server/routers/_app';
import { transformer } from './utils/trpc';
 
export const client = createTRPCClient<AppRouter>({
  links: [
    httpLink({
      url: 'http://localhost:3000',
      transformer,
    }),
  ],
});
src/app/_trpc/client.ts
ts
import { createTRPCClient, httpLink } from '@trpc/client';
import type { AppRouter } from './server/routers/_app';
import { transformer } from './utils/trpc';
 
export const client = createTRPCClient<AppRouter>({
  links: [
    httpLink({
      url: 'http://localhost:3000',
      transformer,
    }),
  ],
});

Transformateurs différents pour l'envoi et la réception​

Si un transformateur doit être utilisé dans une seule direction ou si des transformateurs différents sont nécessaires pour l'envoi et la réception (par exemple pour des raisons de performance), vous pouvez fournir des transformateurs individuels. Veillez à utiliser le même transformateur combiné partout.

Interface DataTransformer​

ts
export interface DataTransformer {
  serialize(object: any): any;
  deserialize(object: any): any;
}
 
interface InputDataTransformer extends DataTransformer {
  /**
   * This function runs **on the client** before sending the data to the server.
   */
  serialize(object: any): any;
  /**
   * This function runs **on the server** to transform the data before it is passed to the resolver
   */
  deserialize(object: any): any;
}
 
interface OutputDataTransformer extends DataTransformer {
  /**
   * This function runs **on the server** before sending the data to the client.
   */
  serialize(object: any): any;
  /**
   * This function runs **only on the client** to transform the data sent from the server.
   */
  deserialize(object: any): any;
}
 
export interface CombinedDataTransformer {
  /**
   * Specify how the data sent from the client to the server should be transformed.
   */
  input: InputDataTransformer;
  /**
   * Specify how the data sent from the server to the client should be transformed.
   */
  output: OutputDataTransformer;
}
ts
export interface DataTransformer {
  serialize(object: any): any;
  deserialize(object: any): any;
}
 
interface InputDataTransformer extends DataTransformer {
  /**
   * This function runs **on the client** before sending the data to the server.
   */
  serialize(object: any): any;
  /**
   * This function runs **on the server** to transform the data before it is passed to the resolver
   */
  deserialize(object: any): any;
}
 
interface OutputDataTransformer extends DataTransformer {
  /**
   * This function runs **on the server** before sending the data to the client.
   */
  serialize(object: any): any;
  /**
   * This function runs **only on the client** to transform the data sent from the server.
   */
  deserialize(object: any): any;
}
 
export interface CombinedDataTransformer {
  /**
   * Specify how the data sent from the client to the server should be transformed.
   */
  input: InputDataTransformer;
  /**
   * Specify how the data sent from the server to the client should be transformed.
   */
  output: OutputDataTransformer;
}