バージョン: 10.x

Fetch / Edge ランタイムアダプター

非公式ベータ版翻訳

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

tRPCサーバーは、WinterCG仕様（特にMinimum Common Web Platform API）に準拠するエッジランタイム環境で作成できます。

これらのランタイムには以下のものなどが含まれます（ただしこれらに限定されません）：

Cloudflare Workers
Deno Deploy
Vercel Edge Runtime（＆ Next.js Edge Runtime）

このアダプターにより、リクエストとレスポンスを表現するためにWebプラットフォームAPIを使用するフレームワークへの統合も容易になります：

Astro（SSRモード）
Remix
SolidStart

サンプルアプリケーション

Description	Links
Cloudflare Workers example	Source
Deno Deploy example	Source
Next.js Edge Runtime example	Source
Vercel Edge Runtime example	Source

エッジランタイムでtRPCサーバーを使用する方法

tRPCは、ネイティブのRequestとResponse APIを入力出力として使用するfetchアダプターを提供します。tRPC固有のコードはすべてのランタイムで共通であり、レスポンスの返し方のみが異なります。

tRPCには標準でネイティブFetch API用アダプターが含まれています。このアダプターを使うと、tRPCルーターをRequestハンドラーに変換し、Responseオブジェクトを返せるようになります。

必要なWeb API

tRPCサーバーは以下のFetch APIを使用します：

Request, Response
fetch
Headers
URL

ランタイムがこれらのAPIをサポートしている場合、tRPCサーバーを使用できます。

ヒント

豆知識：これはブラウザ内でもtRPCサーバーが使えることを意味します！

共通設定

依存関係のインストール

ヒント

Deno Deployを使用している場合はこの手順をスキップできます

npm
yarn
pnpm
bun

sh
npm install @trpc/server zod

sh
npm install @trpc/server zod

sh
yarn add @trpc/server zod

sh
yarn add @trpc/server zod

sh
pnpm add @trpc/server zod

sh
pnpm add @trpc/server zod

sh
bun add @trpc/server zod

sh
bun add @trpc/server zod

Zodは必須依存関係ではありませんが、以下のサンプルルーターで使用されています

ルーターの作成

まず、クエリ・ミューテーション・サブスクリプションを処理するためのルーターが必要です。

サンプルルーターを以下に示します。router.tsというファイル名で保存してください。

router.ts

router.ts
ts
import { initTRPC } from '@trpc/server';
import { z } from 'zod';
import { Context } from './context';
type User = {
  id: string;
  name: string;
  bio?: string;
};
const users: Record<string, User> = {};
export const t = initTRPC.context<Context>().create();
export const appRouter = t.router({
  getUserById: t.procedure.input(z.string()).query((opts) => {
    return users[opts.input]; // input type is string
  }),
  createUser: t.procedure
    // validate input with Zod
    .input(
      z.object({
        name: z.string().min(3),
        bio: z.string().max(142).optional(),
      }),
    )
    .mutation((opts) => {
      const id = Date.now().toString();
      const user: User = { id, ...opts.input };
      users[user.id] = user;
      return user;
    }),
});
// export type definition of API
export type AppRouter = typeof appRouter;

router.ts
ts
import { initTRPC } from '@trpc/server';
import { z } from 'zod';
import { Context } from './context';
type User = {
  id: string;
  name: string;
  bio?: string;
};
const users: Record<string, User> = {};
export const t = initTRPC.context<Context>().create();
export const appRouter = t.router({
  getUserById: t.procedure.input(z.string()).query((opts) => {
    return users[opts.input]; // input type is string
  }),
  createUser: t.procedure
    // validate input with Zod
    .input(
      z.object({
        name: z.string().min(3),
        bio: z.string().max(142).optional(),
      }),
    )
    .mutation((opts) => {
      const id = Date.now().toString();
      const user: User = { id, ...opts.input };
      users[user.id] = user;
      return user;
    }),
});
// export type definition of API
export type AppRouter = typeof appRouter;

ルーターファイルが大きくなりすぎた場合は、ルーターを複数のサブルーターに分割し、それぞれを別ファイルに実装します。その後、それらをマージして単一のルートappRouterにします。

コンテキストの作成

次に、各リクエストごとに作成されるコンテキストが必要です。

サンプルコンテキストを以下に示します。context.tsというファイル名で保存してください：

context.ts

context.ts
ts
import { FetchCreateContextFnOptions } from '@trpc/server/adapters/fetch';
export function createContext({
  req,
  resHeaders,
}: FetchCreateContextFnOptions) {
  const user = { name: req.headers.get('username') ?? 'anonymous' };
  return { req, resHeaders, user };
}
export type Context = Awaited<ReturnType<typeof createContext>>;

context.ts
ts
import { FetchCreateContextFnOptions } from '@trpc/server/adapters/fetch';
export function createContext({
  req,
  resHeaders,
}: FetchCreateContextFnOptions) {
  const user = { name: req.headers.get('username') ?? 'anonymous' };
  return { req, resHeaders, user };
}
export type Context = Awaited<ReturnType<typeof createContext>>;

ランタイム固有の設定

Astro

src/pages/trpc/[trpc].ts
ts
import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
import type { APIRoute } from 'astro';
import { createContext } from '../../server/context';
import { appRouter } from '../../server/router';
export const all: APIRoute = (opts) => {
  return fetchRequestHandler({
    endpoint: '/trpc',
    req: opts.request,
    router: appRouter,
    createContext,
  });
};

src/pages/trpc/[trpc].ts
ts
import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
import type { APIRoute } from 'astro';
import { createContext } from '../../server/context';
import { appRouter } from '../../server/router';
export const all: APIRoute = (opts) => {
  return fetchRequestHandler({
    endpoint: '/trpc',
    req: opts.request,
    router: appRouter,
    createContext,
  });
};

Cloudflare Worker

注記

Cloudflare Workersを実行するにはWrangler CLIが必要です

Cloudflare Workerの作成

server.ts
ts
import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
import { createContext } from './context';
import { appRouter } from './router';
export default {
  async fetch(request: Request): Promise<Response> {
    return fetchRequestHandler({
      endpoint: '/trpc',
      req: request,
      router: appRouter,
      createContext,
    });
  },
};

server.ts
ts
import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
import { createContext } from './context';
import { appRouter } from './router';
export default {
  async fetch(request: Request): Promise<Response> {
    return fetchRequestHandler({
      endpoint: '/trpc',
      req: request,
      router: appRouter,
      createContext,
    });
  },
};

wrangler dev server.tsを実行すると、エンドポイントがHTTP経由で利用可能になります！

Endpoint	HTTP URI
`getUser`	`GET http://localhost:8787/trpc/getUserById?input=INPUT` where `INPUT` is a URI-encoded JSON string.
`createUser`	`POST http://localhost:8787/trpc/createUser` with `req.body` of type `User`

Deno Oak

注記

この手順はDenoがインストール済みであることを前提としています。詳細はDenoのはじめにガイドを参照してください。

`router.ts`のインポートを更新

router.ts
ts
import { initTRPC } from 'npm:@trpc/server';
import { z } from 'npm:zod';
import { Context } from './context.ts';

router.ts
ts
import { initTRPC } from 'npm:@trpc/server';
import { z } from 'npm:zod';
import { Context } from './context.ts';

`context.ts`のインポートを更新

context.ts
ts
import { FetchCreateContextFnOptions } from 'npm:@trpc/server/adapters/fetch';

context.ts
ts
import { FetchCreateContextFnOptions } from 'npm:@trpc/server/adapters/fetch';

Oakで`fetchRequestHandler`を使用する (`app.ts`)

app.ts
ts
import { Application, Router } from 'https://deno.land/x/oak/mod.ts';
import { fetchRequestHandler } from 'npm:@trpc/server/adapters/fetch';
import { createContext } from './context.ts';
import { appRouter } from './router.ts';
const app = new Application();
const router = new Router();
router.all('/trpc/(.*)', async (ctx) => {
  const res = await fetchRequestHandler({
    endpoint: '/trpc',
    req: new Request(ctx.request.url, {
      headers: ctx.request.headers,
      body:
        ctx.request.method !== 'GET' && ctx.request.method !== 'HEAD'
          ? ctx.request.body({ type: 'stream' }).value
          : void 0,
      method: ctx.request.method,
    }),
    router: appRouter,
    createContext,
  });
  ctx.response.status = res.status;
  ctx.response.headers = res.headers;
  ctx.response.body = res.body;
});
app.use(router.routes());
app.use(router.allowedMethods());
await app.listen({ port: 3000 });

app.ts
ts
import { Application, Router } from 'https://deno.land/x/oak/mod.ts';
import { fetchRequestHandler } from 'npm:@trpc/server/adapters/fetch';
import { createContext } from './context.ts';
import { appRouter } from './router.ts';
const app = new Application();
const router = new Router();
router.all('/trpc/(.*)', async (ctx) => {
  const res = await fetchRequestHandler({
    endpoint: '/trpc',
    req: new Request(ctx.request.url, {
      headers: ctx.request.headers,
      body:
        ctx.request.method !== 'GET' && ctx.request.method !== 'HEAD'
          ? ctx.request.body({ type: 'stream' }).value
          : void 0,
      method: ctx.request.method,
    }),
    router: appRouter,
    createContext,
  });
  ctx.response.status = res.status;
  ctx.response.headers = res.headers;
  ctx.response.body = res.body;
});
app.use(router.routes());
app.use(router.allowedMethods());
await app.listen({ port: 3000 });

Deno Deploy

注記

この手順はDenoがインストール済みであることを前提としています。詳細はDenoのはじめにガイドを参照してください。

ヒント

動作するサンプルはDeno Deployアプリの例をご覧ください。

`router.ts`のインポートを更新

router.ts
ts
import { initTRPC } from 'npm:@trpc/server';
import { z } from 'npm:zod';
import { Context } from './context.ts';

router.ts
ts
import { initTRPC } from 'npm:@trpc/server';
import { z } from 'npm:zod';
import { Context } from './context.ts';

`context.ts`のインポートを更新

context.ts
ts
import { FetchCreateContextFnOptions } from 'npm:@trpc/server/adapters/fetch';

context.ts
ts
import { FetchCreateContextFnOptions } from 'npm:@trpc/server/adapters/fetch';

Deno Deploy関数の作成

server.ts
ts
import { fetchRequestHandler } from 'npm:@trpc/server/adapters/fetch';
import { createContext } from './context.ts';
import { appRouter } from './router.ts';
function handler(request) {
  return fetchRequestHandler({
    endpoint: '/trpc',
    req: request,
    router: appRouter,
    createContext,
  });
}
Deno.serve(handler);

server.ts
ts
import { fetchRequestHandler } from 'npm:@trpc/server/adapters/fetch';
import { createContext } from './context.ts';
import { appRouter } from './router.ts';
function handler(request) {
  return fetchRequestHandler({
    endpoint: '/trpc',
    req: request,
    router: appRouter,
    createContext,
  });
}
Deno.serve(handler);

deno run --allow-net=:8000 --allow-env ./server.tsを実行すると、エンドポイントがHTTP経由で利用可能になります！

Endpoint	HTTP URI
`getUser`	`GET http://localhost:8000/trpc/getUserById?input=INPUT` where `INPUT` is a URI-encoded JSON string.
`createUser`	`POST http://localhost:8000/trpc/createUser` with `req.body` of type `User`

Next.js Edge Runtime

完全なサンプルはこちらをご覧ください。

Remix

app/routes/trpc/$trpc.ts
ts
import type { ActionArgs, LoaderArgs } from '@remix-run/node';
import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
import { createContext } from '~/server/context';
import { appRouter } from '~/server/router';
export const loader = async (args: LoaderArgs) => {
  return handleRequest(args);
};
export const action = async (args: ActionArgs) => {
  return handleRequest(args);
};
function handleRequest(args: LoaderArgs | ActionArgs) {
  return fetchRequestHandler({
    endpoint: '/trpc',
    req: args.request,
    router: appRouter,
    createContext,
  });
}

app/routes/trpc/$trpc.ts
ts
import type { ActionArgs, LoaderArgs } from '@remix-run/node';
import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
import { createContext } from '~/server/context';
import { appRouter } from '~/server/router';
export const loader = async (args: LoaderArgs) => {
  return handleRequest(args);
};
export const action = async (args: ActionArgs) => {
  return handleRequest(args);
};
function handleRequest(args: LoaderArgs | ActionArgs) {
  return fetchRequestHandler({
    endpoint: '/trpc',
    req: args.request,
    router: appRouter,
    createContext,
  });
}

SolidStart

src/routes/api/trpc/[trpc].ts
ts
import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
import type { APIEvent } from 'solid-start';
import { createContext } from '../../server/context';
import { appRouter } from '../../server/router';
const handler = (event: APIEvent) =>
  fetchRequestHandler({
    endpoint: '/api/trpc',
    req: event.request,
    router: appRouter,
    createContext,
  });
export { handler as GET, handler as POST };

src/routes/api/trpc/[trpc].ts
ts
import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
import type { APIEvent } from 'solid-start';
import { createContext } from '../../server/context';
import { appRouter } from '../../server/router';
const handler = (event: APIEvent) =>
  fetchRequestHandler({
    endpoint: '/api/trpc',
    req: event.request,
    router: appRouter,
    createContext,
  });
export { handler as GET, handler as POST };

Vercel Edge Runtime

注記

詳細は公式Vercel Edge Runtimeドキュメントを参照してください。

ヒント

動作するサンプルはVercel Edge Runtimeアプリの例をご覧ください。

依存関係のインストール

npm
yarn
pnpm
bun

sh
npm install -g edge-runtime

sh
npm install -g edge-runtime

sh
yarn global add edge-runtime

sh
yarn global add edge-runtime

sh
pnpm add -g edge-runtime

sh
pnpm add -g edge-runtime

sh
bun add -g edge-runtime

sh
bun add -g edge-runtime

Edge Runtime関数の作成

server.ts
ts
import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
import { createContext } from './context';
import { appRouter } from './router';
addEventListener('fetch', (event) => {
  return event.respondWith(
    fetchRequestHandler({
      endpoint: '/trpc',
      req: event.request,
      router: appRouter,
      createContext,
    }),
  );
});

server.ts
ts
import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
import { createContext } from './context';
import { appRouter } from './router';
addEventListener('fetch', (event) => {
  return event.respondWith(
    fetchRequestHandler({
      endpoint: '/trpc',
      req: event.request,
      router: appRouter,
      createContext,
    }),
  );
});

edge-runtime --listen server.ts --port 3000を実行すると、エンドポイントがHTTP経由で利用可能になります！

Endpoint	HTTP URI
`getUser`	`GET http://localhost:3000/trpc/getUserById?input=INPUT` where `INPUT` is a URI-encoded JSON string.
`createUser`	`POST http://localhost:3000/trpc/createUser` with `req.body` of type `User`

サンプルアプリケーション​

エッジランタイムでtRPCサーバーを使用する方法​

必要なWeb API​

共通設定​

依存関係のインストール​

ルーターの作成​

コンテキストの作成​

ランタイム固有の設定​

Astro​

Cloudflare Worker​

Cloudflare Workerの作成​

Deno Oak​

router.tsのインポートを更新​

context.tsのインポートを更新​

OakでfetchRequestHandlerを使用する (app.ts)​

Deno Deploy​

router.tsのインポートを更新​

context.tsのインポートを更新​

Deno Deploy関数の作成​

Next.js Edge Runtime​

Remix​

SolidStart​

Vercel Edge Runtime​

依存関係のインストール​

Edge Runtime関数の作成​

サンプルアプリケーション

エッジランタイムでtRPCサーバーを使用する方法

必要なWeb API

共通設定

依存関係のインストール

ルーターの作成

コンテキストの作成

ランタイム固有の設定

Astro

Cloudflare Worker

Cloudflare Workerの作成

Deno Oak

`router.ts`のインポートを更新

`context.ts`のインポートを更新

Oakで`fetchRequestHandler`を使用する (`app.ts`)

Deno Deploy

`router.ts`のインポートを更新

`context.ts`のインポートを更新

Deno Deploy関数の作成

Next.js Edge Runtime

Remix

SolidStart

Vercel Edge Runtime

依存関係のインストール

Edge Runtime関数の作成