grpc / grpc-web

gRPC for Web Clients
https://grpc.io
Apache License 2.0
8.45k stars 760 forks source link

Why generated files doesn't have implemented classes? #1421

Closed rodrigorodriguescosta closed 3 weeks ago

rodrigorodriguescosta commented 2 months ago

Hi, I'd like to understand why generated files in typescript are not implemented, so Echo example where has request.setMessage('Hello World!'); doesn't work because setMessage is not implemented

error: req.setName is not a function, because setName is not implemented in generated files, what's am I doing wrong?

this is my buf.gen.yaml


   - plugin: grpc-web
     out: comps/svelte/pb
     opt:
       - import_style=commonjs+dts
       - mode=grpcwebtext

here are all the files

test.proto

syntax = "proto3";

option go_package = "apps/test";

service TestService {
  rpc Test(TestRequest) returns (TestResponse){}
}

message TestRequest {
  string name = 1;
}

message TestResponse {
  string resp = 1;
}

test_pb.d.ts

import * as jspb from 'google-protobuf'

export class TestRequest extends jspb.Message {
  getName(): string;
  setName(value: string): TestRequest;

  serializeBinary(): Uint8Array;
  toObject(includeInstance?: boolean): TestRequest.AsObject;
  static toObject(includeInstance: boolean, msg: TestRequest): TestRequest.AsObject;
  static serializeBinaryToWriter(message: TestRequest, writer: jspb.BinaryWriter): void;
  static deserializeBinary(bytes: Uint8Array): TestRequest;
  static deserializeBinaryFromReader(message: TestRequest, reader: jspb.BinaryReader): TestRequest;
}

export namespace TestRequest {
  export type AsObject = {
    name: string,
  }
}

export class TestResponse extends jspb.Message {
  getResp(): string;
  setResp(value: string): TestResponse;

  serializeBinary(): Uint8Array;
  toObject(includeInstance?: boolean): TestResponse.AsObject;
  static toObject(includeInstance: boolean, msg: TestResponse): TestResponse.AsObject;
  static serializeBinaryToWriter(message: TestResponse, writer: jspb.BinaryWriter): void;
  static deserializeBinary(bytes: Uint8Array): TestResponse;
  static deserializeBinaryFromReader(message: TestResponse, reader: jspb.BinaryReader): TestResponse;
}

export namespace TestResponse {
  export type AsObject = {
    resp: string,
  }
}

test_grpc_web_pb.d.ts

import * as grpcWeb from 'grpc-web';

import * as test_test_pb from '../test/test_pb'; // proto import: "test/test.proto"

export class TestServiceClient {
  constructor (hostname: string,
               credentials?: null | { [index: string]: string; },
               options?: null | { [index: string]: any; });

  test(
    request: test_test_pb.TestRequest,
    metadata: grpcWeb.Metadata | undefined,
    callback: (err: grpcWeb.RpcError,
               response: test_test_pb.TestResponse) => void
  ): grpcWeb.ClientReadableStream<test_test_pb.TestResponse>;

}

export class TestServicePromiseClient {
  constructor (hostname: string,
               credentials?: null | { [index: string]: string; },
               options?: null | { [index: string]: any; });

  test(
    request: test_test_pb.TestRequest,
    metadata?: grpcWeb.Metadata
  ): Promise<test_test_pb.TestResponse>;

}

test.ts, here I'm trying to send request but req.setName("test") doesn't work because it's not implemented, why do we need to implement requests and response for each message?

import {TestRequest} from '@comps/pb/test/test_pb.d.ts'
import {TestServiceClient} from '@comps/pb/test/test_grpc_web_pb.d.ts'

const req = new TestRequest()
req.setName("test")

const client = new TestServiceClient("localhost:8080")
client.test(req);

so, why all the methods of the classes (like TestRequest ) are not implemented?

sampajano commented 2 months ago

Hi!

I'm not familiar with buf.gen.yaml, because it seems like a Buf concept (not part of this project).

Although, regarding the test_pb.d.ts — it's only a Typescript declaration of the API implemented in Javascript.

In this case, it would exist in test_pb.js file, like below:

Screenshot 2024-04-22 at 6 21 26 PM

So, you need to include the underlying js file as well, like how it's done in the echo example here:

https://github.com/grpc/grpc-web/blob/e91e540fc219c52f2b70bc444b056598b2220e19/net/grpc/gateway/examples/echo/ts-example/client.ts#L23-L24

Hope that helps!

sampajano commented 3 weeks ago

Closing the issue due to inactivity. Feel free to re-open later with more details. Thanks!