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

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

Använda devalue

Devalue fungerar som superjson men fokuserar på prestanda och kompakta payloads på bekostnad av en mindre mänskligt läsbar struktur.

Så här gör du

1. Installera

bash
yarn add superjson devalue

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

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