版本：11.x

獨立式適配器

tRPC 的獨立式適配器是讓新專案運作的最簡單方式。它非常適合於本機開發和基於伺服器的生產環境。基本上，它只是一個標準 Node.js HTTP 伺服器的包裝器，並具有與 tRPC 相關的正常選項。

如果您有現有的 API 部署，例如 Express、Fastify 或 Next.js，您想要將 tRPC 整合到其中，您應該查看它們各自的適配器。同樣地，如果您偏好於在無伺服器或邊緣運算上主機，我們有像 AWS Lambda 和提取等適配器，它們可能符合您的需求。

在已部署的適配器難以在本地機器上執行的情況下，在您的應用程式中擁有 2 個進入點也並非罕見。您可以將獨立式適配器用於本地開發，並在部署時使用不同的適配器。

範例應用程式

說明	連結
獨立式 tRPC 伺服器	StackBlitz 來源
獨立的 tRPC 伺服器與 CORS 處理	StackBlitz 來源

設定獨立的 tRPC 伺服器

1. 實作 App 路由器

實作 tRPC 路由器。例如

appRouter.ts
ts
import { initTRPC } from '@trpc/server';
import { z } from 'zod';
export const t = initTRPC.create();
export const appRouter = t.router({
  getUser: t.procedure.input(z.string()).query((opts) => {
    return { id: opts.input, name: 'Bilbo' };
  }),
  createUser: t.procedure
    .input(z.object({ name: z.string().min(5) }))
    .mutation(async (opts) => {
      // use your ORM of choice
      return await UserModel.create({
        data: opts.input,
      });
    }),
});
// export type definition of API
export type AppRouter = typeof appRouter;

appRouter.ts
ts
import { initTRPC } from '@trpc/server';
import { z } from 'zod';
export const t = initTRPC.create();
export const appRouter = t.router({
  getUser: t.procedure.input(z.string()).query((opts) => {
    return { id: opts.input, name: 'Bilbo' };
  }),
  createUser: t.procedure
    .input(z.object({ name: z.string().min(5) }))
    .mutation(async (opts) => {
      // use your ORM of choice
      return await UserModel.create({
        data: opts.input,
      });
    }),
});
// export type definition of API
export type AppRouter = typeof appRouter;

更多資訊，請參閱快速入門指南

2. 使用獨立的轉接器

獨立的轉接器會執行一個簡單的 Node.js HTTP 伺服器。

server.ts
ts
import { initTRPC } from '@trpc/server';
import { createHTTPServer } from '@trpc/server/adapters/standalone';
import { appRouter } from './appRouter.ts';
createHTTPServer({
  router: appRouter,
  createContext() {
    console.log('context 3');
    return {};
  },
}).listen(2022);

server.ts
ts
import { initTRPC } from '@trpc/server';
import { createHTTPServer } from '@trpc/server/adapters/standalone';
import { appRouter } from './appRouter.ts';
createHTTPServer({
  router: appRouter,
  createContext() {
    console.log('context 3');
    return {};
  },
}).listen(2022);

處理 CORS 和 OPTIONS

預設情況下，獨立的伺服器不會回應 HTTP OPTIONS 要求，或設定任何 CORS 標頭。

如果您沒有在可以為您處理此問題的環境中進行主機，例如在本地開發期間，您可能需要處理此問題。

1. 安裝 cors

您可以使用熱門的 cors 套件自行新增支援

bash
yarn add cors
yarn add -D @types/cors

bash
yarn add cors
yarn add -D @types/cors

有關如何設定此套件的完整資訊，請查看文件

2. 設定獨立的伺服器

此範例僅對任何要求開放 CORS，這對於開發很有用，但您可以在生產環境中更嚴格地設定它。

server.ts
ts
import { initTRPC } from '@trpc/server';
import { createHTTPServer } from '@trpc/server/adapters/standalone';
import cors from 'cors';
createHTTPServer({
  middleware: cors(),
  router: appRouter,
  createContext() {
    console.log('context 3');
    return {};
  },
}).listen(3333);

server.ts
ts
import { initTRPC } from '@trpc/server';
import { createHTTPServer } from '@trpc/server/adapters/standalone';
import cors from 'cors';
createHTTPServer({
  middleware: cors(),
  router: appRouter,
  createContext() {
    console.log('context 3');
    return {};
  },
}).listen(3333);

middleware 選項會接受任何類似於 connect/node.js 中介軟體的函式，因此它可以用於處理 cors 以外的內容（如果您願意）。不過，它預計只是一個簡單的逃生艙口，因此本身無法讓您組合多個中介軟體。如果您想執行此操作，您可以

使用支援更全面的中介軟體的替代轉接器，例如 Express 轉接器
使用解決方案來組合中介軟體，例如 connect
使用自訂 HTTP 伺服器擴充獨立的 createHTTPHandler（見下文）

深入了解

createHTTPServer 會傳回 Node 內建 http.Server 的執行個體 (https://node.dev.org.tw/api/http.html#class-httpserver)，表示你可以存取其所有屬性和 API。不過，如果 createHTTPServer 不足以應付你的使用案例，你也可以使用獨立的轉接器的 createHTTPHandler 函式來建立自己的 HTTP 伺服器。例如

server.ts
ts
import { createServer } from 'http';
import { initTRPC } from '@trpc/server';
import { createHTTPHandler } from '@trpc/server/adapters/standalone';
const handler = createHTTPHandler({
  router: appRouter,
  createContext() {
    return {};
  },
});
createServer((req, res) => {
  /**
   * Handle the request however you like,
   * just call the tRPC handler when you're ready
   */
  handler(req, res);
}).listen(3333);

server.ts
ts
import { createServer } from 'http';
import { initTRPC } from '@trpc/server';
import { createHTTPHandler } from '@trpc/server/adapters/standalone';
const handler = createHTTPHandler({
  router: appRouter,
  createContext() {
    return {};
  },
});
createServer((req, res) => {
  /**
   * Handle the request however you like,
   * just call the tRPC handler when you're ready
   */
  handler(req, res);
}).listen(3333);

範例應用程式​

設定獨立的 tRPC 伺服器​

1. 實作 App 路由器​

2. 使用獨立的轉接器​

處理 CORS 和 OPTIONS​

1. 安裝 cors​

2. 設定獨立的伺服器​

深入了解​