バージョン: 9.x

リンクとリクエストのバッチ処理

非公式ベータ版翻訳

このページは PageTurner AI で翻訳されました（ベータ版）。プロジェクト公式の承認はありません。エラーを見つけましたか？問題を報告 →

urqlのexchangesやApolloのlinksと同様の概念です。リンクを使用すると、tRPCクライアントとtRPCサーバー間のデータフローをカスタマイズできます。

リクエストのバッチ処理

リクエストのバッチ処理は自動的に有効になっており、サーバーへのリクエストをまとめます。これにより、以下のコードは1回のHTTPリクエストを生成し、サーバー側では1回のデータベースクエリを実行します：

ts
// below will be done in the same request when batching is enabled
const somePosts = await Promise.all([
  client.query('post.byId', 1),
  client.query('post.byId', 2),
  client.query('post.byId', 3),
]);

ts
// below will be done in the same request when batching is enabled
const somePosts = await Promise.all([
  client.query('post.byId', 1),
  client.query('post.byId', 2),
  client.query('post.byId', 3),
]);

データフローのカスタマイズ

以下の例ではNext.jsを使用していることを前提としていますが、VanillaのtRPCクライアントを使用する場合も同様に適用できます

最大バッチサイズの設定

これはバッチでまとめて送信できるリクエストの数を制限します（URLが大きくなりすぎてHTTPエラー413が発生するのを防ぐのに役立ちます）。

server.ts
ts
// 👇 import the httpBatchLink
import { httpBatchLink } from '@trpc/client/links/httpBatchLink';
import { withTRPC } from '@trpc/next';
import { AppType } from 'next/dist/shared/lib/utils';
import type { AppRouter } from 'pages/api/trpc/[trpc]';
const MyApp: AppType = ({ Component, pageProps }) => {
  return <Component {...pageProps} />;
};
export default withTRPC<AppRouter>({
  config() {
    return {
      links: [
        httpBatchLink({
          url: '/api/trpc',
          maxBatchSize: 10, // a reasonable size
        }),
      ],
    };
  },
})(MyApp);

server.ts
ts
// 👇 import the httpBatchLink
import { httpBatchLink } from '@trpc/client/links/httpBatchLink';
import { withTRPC } from '@trpc/next';
import { AppType } from 'next/dist/shared/lib/utils';
import type { AppRouter } from 'pages/api/trpc/[trpc]';
const MyApp: AppType = ({ Component, pageProps }) => {
  return <Component {...pageProps} />;
};
export default withTRPC<AppRouter>({
  config() {
    return {
      links: [
        httpBatchLink({
          url: '/api/trpc',
          maxBatchSize: 10, // a reasonable size
        }),
      ],
    };
  },
})(MyApp);

リクエストのバッチ処理の無効化

1. サーバーで`batching`を無効にする：

[trpc].tsファイル内で：

pages/api/trpc/[trpc].ts
ts
export default trpcNext.createNextApiHandler({
  // [...]
  // 👇 disable batching
  batching: {
    enabled: false,
  },
});

pages/api/trpc/[trpc].ts
ts
export default trpcNext.createNextApiHandler({
  // [...]
  // 👇 disable batching
  batching: {
    enabled: false,
  },
});

2. tRPCクライアントでバッチ処理なしのリンクを使用する

pages/_app.tsx
tsx
// 👇 import the httpLink
import { httpLink } from '@trpc/client/links/httpLink';
import { withTRPC } from '@trpc/next';
import { AppType } from 'next/dist/shared/lib/utils';
import type { AppRouter } from 'pages/api/trpc/[trpc]';
const MyApp: AppType = ({ Component, pageProps }) => {
  return <Component {...pageProps} />;
};
export default withTRPC<AppRouter>({
  config() {
    return {
      links: [
        httpLink({
          url: '/api/trpc',
        }),
      ],
    };
  },
  // ssr: false,
})(MyApp);

pages/_app.tsx
tsx
// 👇 import the httpLink
import { httpLink } from '@trpc/client/links/httpLink';
import { withTRPC } from '@trpc/next';
import { AppType } from 'next/dist/shared/lib/utils';
import type { AppRouter } from 'pages/api/trpc/[trpc]';
const MyApp: AppType = ({ Component, pageProps }) => {
  return <Component {...pageProps} />;
};
export default withTRPC<AppRouter>({
  config() {
    return {
      links: [
        httpLink({
          url: '/api/trpc',
        }),
      ],
    };
  },
  // ssr: false,
})(MyApp);

`splitLink`を使用したリクエストフローの制御

特定のリクエストのバッチ処理を無効にする

1. クライアント / `_app.tsx` の設定

pages/_app.tsx
tsx
import { httpBatchLink } from '@trpc/client/links/httpBatchLink';
import { httpLink } from '@trpc/client/links/httpLink';
import { splitLink } from '@trpc/client/links/splitLink';
import { withTRPC } from '@trpc/next';
// [..]
export default withTRPC<AppRouter>({
  config() {
    const url = `http://localhost:3000`;
    return {
      links: [
        splitLink({
          condition(op) {
            // check for context property `skipBatch`
            return op.context.skipBatch === true;
          },
          // when condition is true, use normal request
          true: httpLink({
            url,
          }),
          // when condition is false, use batching
          false: httpBatchLink({
            url,
          }),
        }),
      ],
    };
  },
})(MyApp);

pages/_app.tsx
tsx
import { httpBatchLink } from '@trpc/client/links/httpBatchLink';
import { httpLink } from '@trpc/client/links/httpLink';
import { splitLink } from '@trpc/client/links/splitLink';
import { withTRPC } from '@trpc/next';
// [..]
export default withTRPC<AppRouter>({
  config() {
    const url = `http://localhost:3000`;
    return {
      links: [
        splitLink({
          condition(op) {
            // check for context property `skipBatch`
            return op.context.skipBatch === true;
          },
          // when condition is true, use normal request
          true: httpLink({
            url,
          }),
          // when condition is false, use batching
          false: httpBatchLink({
            url,
          }),
        }),
      ],
    };
  },
})(MyApp);

2. バッチ処理なしでリクエストを実行する

MyComponent.tsx
tsx
export function MyComponent() {
  const postsQuery = trpc.useQuery(['posts'], {
    context: {
      skipBatch: true,
    },
  });
  return (
    <pre>{JSON.stringify(postsQuery.data ?? null, null, 4)}</pre>
  )
})

MyComponent.tsx
tsx
export function MyComponent() {
  const postsQuery = trpc.useQuery(['posts'], {
    context: {
      skipBatch: true,
    },
  });
  return (
    <pre>{JSON.stringify(postsQuery.data ?? null, null, 4)}</pre>
  )
})

または：

client.ts
ts
const postResult = client.query('posts', null, {
  context: {
    skipBatch: true,
  },
});

client.ts
ts
const postResult = client.query('posts', null, {
  context: {
    skipBatch: true,
  },
});

カスタムリンクの作成

pages/_app.tsx
tsx
import { TRPCLink } from '@trpc/client';
import type { AppRouter } from 'pages/api/trpc/[trpc]';
const customLink: TRPCLink<AppRouter> = (runtime) => {
  // here we just got initialized in the app - this happens once per app
  // useful for storing cache for instance
  return ({ prev, next, op }) => {
    // this is when passing the result to the next link
    next(op, (result) => {
      // this is when we've gotten result from the server
      if (result instanceof Error) {
        // maybe send to bugsnag?
      }
      prev(result);
    });
  };
};
export default withTRPC<AppRouter>({
  config() {
    return {
      links: [
        customLink,
        // [..]
        // ❗ Make sure to end with a `httpBatchLink` or `httpLink`
      ],
    };
  },
  // ssr: false
})(MyApp);

pages/_app.tsx
tsx
import { TRPCLink } from '@trpc/client';
import type { AppRouter } from 'pages/api/trpc/[trpc]';
const customLink: TRPCLink<AppRouter> = (runtime) => {
  // here we just got initialized in the app - this happens once per app
  // useful for storing cache for instance
  return ({ prev, next, op }) => {
    // this is when passing the result to the next link
    next(op, (result) => {
      // this is when we've gotten result from the server
      if (result instanceof Error) {
        // maybe send to bugsnag?
      }
      prev(result);
    });
  };
};
export default withTRPC<AppRouter>({
  config() {
    return {
      links: [
        customLink,
        // [..]
        // ❗ Make sure to end with a `httpBatchLink` or `httpLink`
      ],
    };
  },
  // ssr: false
})(MyApp);

リクエストのバッチ処理​

データフローのカスタマイズ​

最大バッチサイズの設定​

リクエストのバッチ処理の無効化​

1. サーバーでbatchingを無効にする：​

2. tRPCクライアントでバッチ処理なしのリンクを使用する​

splitLinkを使用したリクエストフローの制御​

特定のリクエストのバッチ処理を無効にする​

1. クライアント / _app.tsx の設定​

2. バッチ処理なしでリクエストを実行する​

カスタムリンクの作成​