How do you generate typings for protobuf files for use with GRPC?

Question

I am trying to use GRPC with TypeScript, and I am trying to make sure I have all the types set (rather than just adding my own mapping or using any.

I've gotten as far as with problems I am experiencing noted in the comments.

import { Server, loadPackageDefinition } from "grpc";
import { loadSync } from "@grpc/proto-loader";

const packageDefinition = loadSync(__dirname + "/protos/artifact.proto");
const artifacts = loadPackageDefinition(packageDefinition).artifacts;

// what are the types here?
function SignedUrlPutObject(call, callback) {
}

const server = new Server();
// There's no ArtifactUpload defined in artifacts
server.addService(artifacts.ArtifactUpload.service, { SignedUrlPutObject })

Another approach I tried was to use pbjs and pbts.

"protobuf": "pbjs -t static-module -w commonjs -o protos.js protos/artifact-upload.proto && pbts -o protos.d.ts protos.js",

This generated the typings file, but I can't get it to work with grpc. Here's a github issue I found that may be related https://github.com/protobufjs/protobuf.js/issues/1381

Answer 1

There's 3 main tools you can use:

1. ts-protoc-gen
2. @grpc/proto-loader
3. grpc_tools_node_protoc_ts

I recommend using proto-loader:

npm i @grpc/proto-loader

You can then generate the types like so:

./node_modules/.bin/proto-loader-gen-types --longs=String --enums=String --defaults --oneofs --grpcLib=@grpc/grpc-js --outDir=proto/ proto/*.proto

Here's the proto file I use for this example:

syntax = "proto3";

package example_package;

message ServerMessage {
  string server_message = 1;
}

message ClientMessage {
  string client_message = 1;
}

service Example {
  rpc unaryCall(ClientMessage) returns (ServerMessage) {}
  rpc serverStreamingCall(ClientMessage) returns (stream ServerMessage) {}
  rpc clientStreamingCall(stream ClientMessage) returns (ServerMessage) {}
  rpc bidirectionalStreamingCall(stream ClientMessage) returns (stream ServerMessage) {}
}

Once the types are generated, you can consume them like so:

import * as grpc from '@grpc/grpc-js';
import * as protoLoader from '@grpc/proto-loader';
import { ProtoGrpcType } from './proto/example';
import { ClientMessage } from './proto/example_package/ClientMessage';
import { ExampleHandlers } from './proto/example_package/Example';
import { ServerMessage } from './proto/example_package/ServerMessage';

const host = '0.0.0.0:9090';

const exampleServer: ExampleHandlers = {
  unaryCall(
    call: grpc.ServerUnaryCall<ClientMessage, ServerMessage>,
    callback: grpc.sendUnaryData<ServerMessage>
  ) {
    if (call.request) {
      console.log(`(server) Got client message: ${call.request.clientMessage}`);
    }
    callback(null, {
      serverMessage: 'Message from server',
    });
  },

  serverStreamingCall(
    call: grpc.ServerWritableStream<ClientMessage, ServerMessage>
  ) {
    call.write({
      serverMessage: 'Message from server',
    });
  },

  clientStreamingCall(
    call: grpc.ServerReadableStream<ClientMessage, ServerMessage>
  ) {
    call.on('data', (clientMessage: ClientMessage) => {
      console.log(
        `(server) Got client message: ${clientMessage.clientMessage}`
      );
    });
  },

  bidirectionalStreamingCall(
    call: grpc.ServerDuplexStream<ClientMessage, ServerMessage>
  ) {
    call.write({
      serverMessage: 'Message from server',
    });
    call.on('data', (clientMessage: ClientMessage) => {
      console.log(
        `(server) Got client message: ${clientMessage.clientMessage}`
      );
    });
  },
};

function getServer(): grpc.Server {
  const packageDefinition = protoLoader.loadSync('./proto/example.proto');
  const proto = (grpc.loadPackageDefinition(
    packageDefinition
  ) as unknown) as ProtoGrpcType;
  const server = new grpc.Server();
  server.addService(proto.example_package.Example.service, exampleServer);
  return server;
}

if (require.main === module) {
  const server = getServer();
  server.bindAsync(
    host,
    grpc.ServerCredentials.createInsecure(),
    (err: Error | null, port: number) => {
      if (err) {
        console.error(`Server error: ${err.message}`);
      } else {
        console.log(`Server bound on port: ${port}`);
        server.start();
      }
    }
  );
}

I've created various examples of how to use gRPC with TypeScript here: https://github.com/badsyntax/grpc-js-types