Hoppa till huvudinnehållet
Version: 11.x

Datatransformatorer

Inofficiell Beta-översättning

Denna sida har översatts av PageTurner AI (beta). Inte officiellt godkänd av projektet. Hittade du ett fel? Rapportera problem →

Du kan serialisera svarsdata och indataargument. Transformatorerna måste läggas till både på servern och klienten.

Använda superjson​

SuperJSON låter oss använda standardtyper som Date, Map och Set transparent över nätverket mellan server och klient. Det innebär att du kan returnera dessa typer från din API-resolver och använda dem direkt på klienten utan att behöva återskapa objekten från JSON.

Så här gör du​

1. Installera​

bash
yarn add superjson
bash
yarn add superjson

2. Lägg till i din 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. Lägg till i httpLink(), wsLink(), etc.​

TypeScript kommer att vägleda dig till var du behöver lägga till transformer så snart du lagt till den på initTRPC-objektet

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

Använda devalue​

Devalue fungerar som superjson med fokus på prestanda och kompakta nyttobelastningar, men på bekostnad av en mindre lättläst body.

Så här gör du​

1. Installera​

bash
yarn add devalue
bash
yarn add devalue

2. Lägg till i utils/trpc.ts​

Här använder vi parse och stringify eftersom de motverkar 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. Lägg till i din 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. Lägg till i httpLink(), wsLink(), etc.​

TypeScript kommer att vägleda dig till var du behöver lägga till transformer så snart du lagt till den på initTRPC-objektet

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

Olika transformatorer för uppladdning och nedladdning​

Om en transformator endast ska användas i en riktning eller om olika transformatorer behövs för uppladdning och nedladdning (t.ex. av prestandaskäl), kan du ange separata transformatorer. Se till att du använder samma kombinerade transformator överallt.

DataTransformer-gränssnitt​

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