メインコンテンツにスキップ
バージョン：11.x

スタンドアロンアダプター

tRPCのスタンドアロンアダプターは、新しいプロジェクトを稼働させる最も簡単な方法です。ローカル開発や、サーバーベースのプロダクション環境に最適です。本質的には、tRPCに関連する通常のオプションを備えた標準のNode.js HTTPサーバーのラッパーにすぎません。

Express、Fastify、またはNext.jsのような既存のAPIデプロイがあり、そこにtRPCを統合したい場合は、それぞれののアダプターを参照する必要があります。同様に、サーバーレスまたはエッジコンピューティングでホストすることを希望する場合は、AWS LambdaやFetchのようなアダプターがニーズに合うかもしれません。

また、デプロイされたアダプターをローカルマシンで実行するのが難しい場合、アプリケーションに2つのエントリポイントを持つことも珍しくありません。ローカル開発にはスタンドアロンアダプターを使用し、デプロイ時には異なるアダプターを使用することができます。

サンプルアプリ​

説明リンク
スタンドアロンtRPCサーバー
CORS処理付きスタンドアロンtRPCサーバー

スタンドアロンtRPCサーバーの設定​

1. アプリケーションルーターを実装する​

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処理以外の目的にも使用できます。ただし、これはシンプルなエスケープハッチとして意図されており、それ自体で複数のミドルウェアを組み合わせることはできません。これを行いたい場合は、以下を実行できます。

  1. Expressアダプターなど、より包括的なミドルウェアサポートを備えた代替アダプターを使用する
  2. connectのようなミドルウェアを組み合わせるためのソリューションを使用する
  3. カスタムHTTPサーバーでスタンドアロンのcreateHTTPHandlerを拡張する（下記参照）

さらに進む​

createHTTPServerは、Node.js組み込みのhttp.Serverのインスタンス（https://node.dokyumento.jp/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);