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

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

routers/router/_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 } from '@trpc/client';
import type { AppRouter } from '~/server/routers/_app';
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 } from '@trpc/client';
import type { AppRouter } from '~/server/routers/_app';
import superjson from 'superjson';
export const client = createTRPCClient<AppRouter>({
  links: [
    httpLink({
      url: 'http://localhost:3000',
      transformer: superjson,
    }),
  ],
});

Utilisation de devalue

Devalue fonctionne comme superjson mais se concentre sur les performances et la compacité des charges utiles, au détriment d'un corps moins lisible par un humain.

Procédure

1. Installation

bash
yarn add superjson devalue

bash
yarn add superjson 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 } 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 } 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;
}