Aller au contenu principal
Version : 9.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 et Set lors des échanges entre le serveur et le client. Cela signifie que vous pouvez renvoyer ces types dans vos résolveurs d'API et les utiliser côté client sans avoir à reconstruire les objets depuis du JSON.

Procédure​

1. Installation​

bash
yarn add superjson
bash
yarn add superjson

2. Ajouter à la configuration de createTRPCCLient() ou de withTRPC()​

client.ts
ts
import superjson from 'superjson';
// [...]
export const client = createTRPCClient<AppRouter>({
  // [...]
  transformer: superjson,
});
client.ts
ts
import superjson from 'superjson';
// [...]
export const client = createTRPCClient<AppRouter>({
  // [...]
  transformer: superjson,
});
pages/_app.tsx
ts
import superjson from 'superjson';
// [...]
export default withTRPC<AppRouter>({
  config(config) {
    return {
      // [...]
      transformer: superjson,
    };
  },
})(MyApp);
pages/_app.tsx
ts
import superjson from 'superjson';
// [...]
export default withTRPC<AppRouter>({
  config(config) {
    return {
      // [...]
      transformer: superjson,
    };
  },
})(MyApp);

3. Ajout à votre AppRouter​

server/routers/_app.ts
ts
import * as trpc from '@trpc/server';
import superjson from 'superjson';
export const appRouter = trpc.router().transformer(superjson);
// .query(...)
server/routers/_app.ts
ts
import * as trpc from '@trpc/server';
import superjson from 'superjson';
export const appRouter = trpc.router().transformer(superjson);
// .query(...)

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

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

Procédure​

Ici superjson est utilisé pour l'envoi et devalue pour la réception des données, car devalue est beaucoup plus rapide mais non sécurisé pour une utilisation côté serveur.

1. Installation​

bash
yarn add superjson devalue
bash
yarn add superjson devalue

2. Ajout à utils/trpc.ts​

utils/trpc.ts
ts
import { uneval } from 'devalue';
import superjson from 'superjson';
// [...]
export const transformer = {
  input: superjson,
  output: {
    serialize: (object) => uneval(object),
    deserialize: (object) => eval(`(${object})`),
  },
};
utils/trpc.ts
ts
import { uneval } from 'devalue';
import superjson from 'superjson';
// [...]
export const transformer = {
  input: superjson,
  output: {
    serialize: (object) => uneval(object),
    deserialize: (object) => eval(`(${object})`),
  },
};

3. Ajouter à createTRPCCLient()​

client.ts
ts
import { transformer } from '../utils/trpc';
// [...]
export const client = createTRPCClient<AppRouter>({
  // [...]
  transformer: transformer,
});
client.ts
ts
import { transformer } from '../utils/trpc';
// [...]
export const client = createTRPCClient<AppRouter>({
  // [...]
  transformer: transformer,
});

4. Ajouter à votre AppRouter​

server/routers/_app.ts
ts
import * as trpc from '@trpc/server';
import { transformer } from '../../utils/trpc';
export const appRouter = trpc.router().transformer(transformer);
// .query(...)
server/routers/_app.ts
ts
import * as trpc from '@trpc/server';
import { transformer } from '../../utils/trpc';
export const appRouter = trpc.router().transformer(transformer);
// .query(...)

Interface DataTransformer​

ts
type DataTransformer = {
  serialize(object: any): any;
  deserialize(object: any): any;
};
type CombinedDataTransformer = {
  input: DataTransformer;
  output: DataTransformer;
};
ts
type DataTransformer = {
  serialize(object: any): any;
  deserialize(object: any): any;
};
type CombinedDataTransformer = {
  input: DataTransformer;
  output: DataTransformer;
};