跳到主要內容
版本：11.x

連結總覽

連結讓您可以自訂 tRPC 用戶端和伺服器之間資料的流程。連結應該只做一件事，可以是對 tRPC 操作 (查詢、變更或訂閱) 的獨立修改，也可以是基於操作的副作用 (例如記錄)。

您可以將連結組成陣列，並透過 links 屬性提供給 tRPC 用戶端設定，它代表連結鏈。這表示 tRPC 用戶端會在執行請求時，依據新增到 links 陣列的順序執行連結，並在處理回應時反向執行連結。以下是連結鏈的視覺化表示

tRPC 連結圖tRPC 連結圖。根據 Apollo。
註解

以下範例假設您使用 Next.js，但如果您使用原始 tRPC 程式庫，也可以新增與以下相同的內容

utils/trpc.ts
tsx
import { httpBatchLink, loggerLink } from '@trpc/client';
import { createTRPCNext } from '@trpc/next';
export default createTRPCNext<AppRouter>({
  config() {
    const url = `http://localhost:3000`;
    return {
      links: [
        loggerLink(),
        httpBatchLink({
          url,
        }),
      ],
    };
  },
});
utils/trpc.ts
tsx
import { httpBatchLink, loggerLink } from '@trpc/client';
import { createTRPCNext } from '@trpc/next';
export default createTRPCNext<AppRouter>({
  config() {
    const url = `http://localhost:3000`;
    return {
      links: [
        loggerLink(),
        httpBatchLink({
          url,
        }),
      ],
    };
  },
});

連結是一個遵循 TRPCLink 類型的函式。每個連結由三部分組成

  1. 連結會傳回一個函式，其參數類型為 TRPCClientRuntime。此引數由 tRPC 傳遞，並在建立 終止連結 時使用。如果您沒有建立終止連結，您可以建立一個沒有參數的函式。在這種情況下，應將連結新增到 links 陣列，而不用呼叫 (links: [..., myLink, httpBatchLink(...)])。
  2. 步驟 1 中的函式會傳回另一個函式，該函式接收一個具有兩個屬性的物件：op，這是由程式庫執行的 Operation，以及 next，這是我們用於呼叫鏈中下一個連結的函式。
  3. 步驟 2 中的函式會傳回一個最終函式，該函式會傳回 @trpc/server 提供的 observable 函式。observable 接受一個函式，該函式接收一個 observer，有助於我們的連結通知鏈中上一個連結如何處理作業結果。在此函式中，我們可以只傳回 next(op) 並保持原樣，或者我們可以訂閱 next，這會讓我們的連結可以處理作業結果。

範例​

utils/customLink.ts
tsx
import { TRPCLink } from '@trpc/client';
import { observable } from '@trpc/server/observable';
import type { AppRouter } from 'server/routers/_app';
export const customLink: TRPCLink<AppRouter> = () => {
  // here we just got initialized in the app - this happens once per app
  // useful for storing cache for instance
  return ({ next, op }) => {
    // this is when passing the result to the next link
    // each link needs to return an observable which propagates results
    return observable((observer) => {
      console.log('performing operation:', op);
      const unsubscribe = next(op).subscribe({
        next(value) {
          console.log('we received value', value);
          observer.next(value);
        },
        error(err) {
          console.log('we received error', err);
          observer.error(err);
        },
        complete() {
          observer.complete();
        },
      });
      return unsubscribe;
    });
  };
};
utils/customLink.ts
tsx
import { TRPCLink } from '@trpc/client';
import { observable } from '@trpc/server/observable';
import type { AppRouter } from 'server/routers/_app';
export const customLink: TRPCLink<AppRouter> = () => {
  // here we just got initialized in the app - this happens once per app
  // useful for storing cache for instance
  return ({ next, op }) => {
    // this is when passing the result to the next link
    // each link needs to return an observable which propagates results
    return observable((observer) => {
      console.log('performing operation:', op);
      const unsubscribe = next(op).subscribe({
        next(value) {
          console.log('we received value', value);
          observer.next(value);
        },
        error(err) {
          console.log('we received error', err);
          observer.error(err);
        },
        complete() {
          observer.complete();
        },
      });
      return unsubscribe;
    });
  };
};

參考資料​

如果您需要更實際的範例來建立自訂連結，您可以查看 GitHub 上 tRPC 提供的一些內建連結。

終止連結是連結鏈中的最後一個連結。終止連結負責將您組合的 tRPC 作業傳送至 tRPC 伺服器，並傳回 OperationResultEnvelope，而不是呼叫 next 函式。

您新增到 tRPC 客戶端設定的 links 陣列應該至少有一個連結，而且該連結應該是終止連結。如果 links 的最後面沒有終止連結，tRPC 作業將不會傳送至 tRPC 伺服器。

httpBatchLink 是 tRPC 推薦的終止連結。

httpLink 和 wsLink 是其他終止連結的範例。

管理內容​

當作業沿著您的連結鏈移動時，它會維護一個每個連結都可以讀取和修改的內容。這允許連結傳遞元資料，供其他連結在執行邏輯中使用。

取得目前的內容物件並透過存取 op.context 來修改它。

您可以透過提供內容參數給 query 或 useQuery 鉤子（或 mutation、subscription 等）來設定特定作業的內容物件初始值。

如需範例使用案例，請參閱 針對特定要求停用批次處理。