Hoppa till huvudinnehållet
Version: 9.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 transparent använda standardobjekt som Date/Map/Set över nätverket mellan server och klient. Det innebär att du kan returnera dessa typer i din API-resolver och använda dem direkt i 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 createTRPCCLient() eller withTRPC()-konfigurationen​

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. Lägg till i din 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(...)

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 använda samma kombinerade transformator överallt.

Så här gör du​

Här används superjson för uppladdning och devalue för nedladdning av data, eftersom devalue är mycket snabbare men osäkert att använda på servern.

1. Installera​

bash
yarn add superjson devalue
bash
yarn add superjson devalue

2. Lägg till i 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. Lägg till i 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. Lägg till i din 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(...)

DataTransformer-gränssnitt​

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