Skip to content
My Docs

BufのConnectを使う

[! Warning] 2025年時点で bufbuild/connect-go と connectrpc/connect-go の2種類あるけれど、bufbuild/connect-go の方は古くてメンテナンスされていないので connectrpc/connect-go を使う

必要なツールをインストールする。

Terminal window
# NPMで入れるなら不要(webをビルドするならNPMで入れる方がいい)
go install github.com/bufbuild/buf/cmd/buf@latest


go install google.golang.org/protobuf/cmd/protoc-gen-go@latest
go install connectrpc.com/connect/cmd/protoc-gen-connect-go@latest

*.proto ファイルを書いて実行。

Terminal window
buf config init
buf lint
buf build

Web版

Terminal window
npm install @bufbuild/protobuf
npm install --save-dev @bufbuild/protoc-gen-es


npm install --save-dev @bufbuild/buf

buf.gen.yaml を書いて実行。

Terminal window
npx buf generate


# NPM経由しない場合はこっち
buf generate

React Router v7から利用する

Section titled “React Router v7から利用する”

@connectrpc/connect-node と @connectrpc/connect-web があるけれど、React Server ComponentsでCloudflare Workersに実行させるときは connect-node の方を使う。

本当か？

まずはモジュールを追加。

Terminal window
npm install @connectrpc/connect @connectrpc/connect-web

あとはConnectクライアントを作るだけなのだけど、workers/app.ts に入れて AppLoadContext 経由で渡すのがいいんじゃないか。

import { createClient } from "@connectrpc/connect";
import type { Client } from "@connectrpc/connect";
import { createConnectTransport } from "@connectrpc/connect-web";
import { WalletService } from "../../proto/gen/wallet/v1/wallet_pb.ts";


declare module "react-router" {
  export interface AppLoadContext {
    walletClient: Client<WalletService>;
  }
}


const transport = createConnectTransport({
  baseUrl: "http://localhost:8080",
});


export default {
  fetch(request, env) {
    return requestHandler(request, {
      walletClient: createClient(WalletService, transport),
    });
  },
} satisfies ExportedHandler<CloudflareEnvironment>;

あとは各種コンポーネントから使うだけ。

export async function loader({ context }: Route.LoaderArgs) {
  const merchants = await context.walletClient.listMerchants();
  return { merchants };
}