Connect-RPC Has a Free API: gRPC That Works in Browsers Without a Proxy

#grpc #api #typescript #go

gRPC is great for backend-to-backend. But in browsers? You need grpc-web, Envoy proxy, and prayers. Connect-RPC just works.

What Is Connect-RPC?

Connect-RPC (from the Buf team) is a set of libraries for building browser and gRPC-compatible APIs. Define your service once with Protobuf, get clients for browsers AND gRPC — no proxy needed.

// user/v1/user.proto
syntax = "proto3";
package user.v1;

service UserService {
  rpc GetUser(GetUserRequest) returns (GetUserResponse) {}
  rpc ListUsers(ListUsersRequest) returns (ListUsersResponse) {}
}

message GetUserRequest { string id = 1; }
message GetUserResponse { User user = 1; }
message User { string id = 1; string name = 2; string email = 3; }

Go Server

func (s *UserServer) GetUser(ctx context.Context, req *connect.Request[userv1.GetUserRequest]) (*connect.Response[userv1.GetUserResponse], error) {
    user, err := s.db.FindUser(req.Msg.Id)
    if err != nil {
        return nil, connect.NewError(connect.CodeNotFound, err)
    }
    return connect.NewResponse(&userv1.GetUserResponse{User: user}), nil
}

// Register and serve
mux := http.NewServeMux()
path, handler := userv1connect.NewUserServiceHandler(&UserServer{})
mux.Handle(path, handler)
http.ListenAndServe(":8080", h2c.NewHandler(mux, &http2.Server{}))

TypeScript Client (Browser)

import { createClient } from "@connectrpc/connect"
import { createConnectTransport } from "@connectrpc/connect-web"
import { UserService } from "./gen/user/v1/user_pb"

const transport = createConnectTransport({ baseUrl: "https://api.example.com" })
const client = createClient(UserService, transport)

// Type-safe API call — works directly in browsers!
const { user } = await client.getUser({ id: "123" })
console.log(user?.name)