Version: 11.x

HTTP Batch-länk

Inofficiell Beta-översättning

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

httpBatchLink är en avslutande länk som samlar flera individuella tRPC-operationer till en enda HTTP-förfrågan som skickas till en enskild tRPC-procedure.

Användning

Du kan importera och lägga till httpBatchLink i links-arrayen så här:

client/index.ts
ts
import { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from './server';
 
const client = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000',
      // transformer,
    }),
  ],
});

client/index.ts
ts
import { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from './server';
 
const client = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000',
      // transformer,
    }),
  ],
});

Efter detta kan du utnyttja batchhantering genom att placera alla dina procedurer i ett Promise.all. Koden nedan genererar exakt en HTTP-förfrågan och på servern exakt en databasfråga:

ts
const somePosts = await Promise.all([
  trpc.post.byId.query(1),
  trpc.post.byId.query(2),
  trpc.post.byId.query(3),
]);

ts
const somePosts = await Promise.all([
  trpc.post.byId.query(1),
  trpc.post.byId.query(2),
  trpc.post.byId.query(3),
]);

Alternativ för `httpBatchLink`

httpBatchLink-funktionen tar ett alternativsobjekt med strukturen HTTPBatchLinkOptions.

ts
export interface HTTPBatchLinkOptions extends HTTPLinkOptions {
  /**
   * Maximum length of HTTP URL allowed before operations are split into multiple requests
   * @default Infinity
   */
  maxURLLength?: number;
  /**
   * Maximum number of operations allowed in a single batch request
   * @default Infinity
   */
  maxItems?: number;
}
 
export interface HTTPLinkOptions {
  url: string | URL;
  /**
   * Add ponyfill for fetch
   */
  fetch?: typeof fetch;
  /**
   * Data transformer
   * @see https://trpc.io/docs/server/data-transformers
   **/
  transformer?: DataTransformerOptions;
  /**
   * Headers to be set on outgoing requests or a callback that of said headers
   * @see https://trpc.io/docs/client/headers
   */
  headers?:
    | HTTPHeaders
    | ((opts: { opList: NonEmptyArray<Operation> }) => HTTPHeaders | Promise<HTTPHeaders>);
}

ts
export interface HTTPBatchLinkOptions extends HTTPLinkOptions {
  /**
   * Maximum length of HTTP URL allowed before operations are split into multiple requests
   * @default Infinity
   */
  maxURLLength?: number;
  /**
   * Maximum number of operations allowed in a single batch request
   * @default Infinity
   */
  maxItems?: number;
}
 
export interface HTTPLinkOptions {
  url: string | URL;
  /**
   * Add ponyfill for fetch
   */
  fetch?: typeof fetch;
  /**
   * Data transformer
   * @see https://trpc.io/docs/server/data-transformers
   **/
  transformer?: DataTransformerOptions;
  /**
   * Headers to be set on outgoing requests or a callback that of said headers
   * @see https://trpc.io/docs/client/headers
   */
  headers?:
    | HTTPHeaders
    | ((opts: { opList: NonEmptyArray<Operation> }) => HTTPHeaders | Promise<HTTPHeaders>);
}

Ställa in maximal URL-längd

Vid sändning av batchförfrågningar kan URL:en ibland bli för lång och orsaka HTTP-fel som 413 Payload Too Large, 414 URI Too Long och 404 Not Found. Alternativet maxURLLength begränsar antalet förfrågningar som kan skickas tillsammans i en batch.

client/index.ts
ts
import { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from './server';
 
const client = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000',
      maxURLLength: 2083, // a suitable size
      // alternatively, you can make all RPC-calls to be called with POST
      // methodOverride: 'POST',
    }),
  ],
});

client/index.ts
ts
import { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from './server';
 
const client = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000',
      maxURLLength: 2083, // a suitable size
      // alternatively, you can make all RPC-calls to be called with POST
      // methodOverride: 'POST',
    }),
  ],
});

Begränsa batchstorlek

1. Ställ in maximal batchstorlek på servern:

maxBatchSize begränsar hur många operationer som får skickas i en enskild batchförfrågan. Förfrågningar som överskrider denna gräns avvisas med ett 400 Bad Request-fel. Denna inställning kan skickas till vilken tRPC-adapter som helst.

server.ts
ts
import { createHTTPServer } from '@trpc/server/adapters/standalone';
createHTTPServer({
  maxBatchSize: 10,
});

server.ts
ts
import { createHTTPServer } from '@trpc/server/adapters/standalone';
createHTTPServer({
  maxBatchSize: 10,
});

eller till exempel om du använder Next.js:

pages/api/trpc/[trpc].ts
ts
export default trpcNext.createNextApiHandler({
  maxBatchSize: 10,
});

pages/api/trpc/[trpc].ts
ts
export default trpcNext.createNextApiHandler({
  maxBatchSize: 10,
});

2. Ställ in matchande gräns på klienten:

Använd alternativet maxItems på din batch-länk för att säkerställa att klienten inte överskrider serverns gräns. Detta delar automatiskt upp stora batchar i flera HTTP-förfrågningar.

client/index.ts
ts
import { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from '../server';
const client = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000',
      // 👇 should be the same or lower than the server's maxBatchSize
      maxItems: 10,
    }),
  ],
});

client/index.ts
ts
import { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from '../server';
const client = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000',
      // 👇 should be the same or lower than the server's maxBatchSize
      maxItems: 10,
    }),
  ],
});

Inaktivera batchhantering

1. Inaktivera `batching` på din server:

server.ts
ts
import { createHTTPServer } from '@trpc/server/adapters/standalone';
import { appRouter } from './router';
 
createHTTPServer({
  router: appRouter,
  // 👇 disable batching
  allowBatching: false,
});

server.ts
ts
import { createHTTPServer } from '@trpc/server/adapters/standalone';
import { appRouter } from './router';
 
createHTTPServer({
  router: appRouter,
  // 👇 disable batching
  allowBatching: false,
});

eller, om du använder Next.js:

pages/api/trpc/[trpc].ts
ts
import { createNextApiHandler } from '@trpc/server/adapters/next';
import { appRouter } from '../../../router';
 
export default createNextApiHandler({
  router: appRouter,
  // 👇 disable batching
  allowBatching: false,
});

pages/api/trpc/[trpc].ts
ts
import { createNextApiHandler } from '@trpc/server/adapters/next';
import { appRouter } from '../../../router';
 
export default createNextApiHandler({
  router: appRouter,
  // 👇 disable batching
  allowBatching: false,
});

2. Ersätt `httpBatchLink` med `httpLink` i din tRPC-klient

client/index.ts
ts
import { createTRPCClient, httpLink } from '@trpc/client';
import type { AppRouter } from './server';
 
const client = createTRPCClient<AppRouter>({
  links: [
    httpLink({
      url: 'http://localhost:3000',
    }),
  ],
});

client/index.ts
ts
import { createTRPCClient, httpLink } from '@trpc/client';
import type { AppRouter } from './server';
 
const client = createTRPCClient<AppRouter>({
  links: [
    httpLink({
      url: 'http://localhost:3000',
    }),
  ],
});

eller, om du använder Next.js:

utils/trpc.ts
tsx
import type { AppRouter } from '../server';
import { httpLink } from '@trpc/client';
import { createTRPCNext } from '@trpc/next';
 
export const trpc = createTRPCNext<AppRouter>({
  config() {
    return {
      links: [
        httpLink({
          url: '/api/trpc',
        }),
      ],
    };
  },
});

utils/trpc.ts
tsx
import type { AppRouter } from '../server';
import { httpLink } from '@trpc/client';
import { createTRPCNext } from '@trpc/next';
 
export const trpc = createTRPCNext<AppRouter>({
  config() {
    return {
      links: [
        httpLink({
          url: '/api/trpc',
        }),
      ],
    };
  },
});

Användning​

Alternativ för httpBatchLink​

Ställa in maximal URL-längd​

Begränsa batchstorlek​

1. Ställ in maximal batchstorlek på servern:​

2. Ställ in matchande gräns på klienten:​

Inaktivera batchhantering​

1. Inaktivera batching på din server:​

2. Ersätt httpBatchLink med httpLink i din tRPC-klient​