Как с React сделать запрос grpc?

Для выполнения запросов gRPC с использованием React вы можете использовать библиотеку grpc-web. gRPC - это открытый протокол удаленного вызова процедур, разработанный компанией Google, который позволяет клиентскому и серверному коду обмениваться данными и вызывать процедуры на удаленных машинах в прозрачной и независимой от языка и платформы манере.

Чтобы начать, установите grpc-web с помощью npm:

npm install grpc-web

Затем включите генерацию кода gRPC-клиента на основе ваших protobuf-определений. Для этого установите плагин protobuf-компилятора protoc-gen-grpc-web:

npm install protoc-gen-grpc-web

Затем выполните следующую команду для генерации кода клиента:

protoc -I=proto --js_out=import_style=commonjs,binary:src --grpc-web_out=import_style=commonjs+dts,mode=grpcwebtext:src proto/*.proto

После генерации кода клиента вам потребуется настроить подключение к серверу gRPC. Вы можете использовать класс grpc.web.GrpcWebClientBase, чтобы создать клиента gRPC:

import { grpc } from "grpc-web";
import { GreeterService } from "./proto/greeter_pb_service";
import { HelloRequest } from "./proto/greeter_pb";

const client = new GreeterService("http://localhost:8080", null, null);

В приведенном выше примере "greeter_pb_service" и "greeter_pb" являются генерированными файлами protobuf, соответствующими вашим определениям protobuf.

После создания клиента вы можете вызывать методы API gRPC, используя async/await или промисы:

const request = new HelloRequest();
request.setName("John Doe");

const response = await new Promise((resolve, reject) => {
  client.sayHello(request, {}, (err, resp) => {
    if (err) {
      reject(err);
    } else {
      resolve(resp);
    }
  });
});

console.log(response.getMessage());

В приведенном выше примере "sayHello" является методом API gRPC, сгенерированным в вашем клиенте.

Обратите внимание, что для обработки ответов от сервера вы можете обернуть вызов метода API gRPC в промис, чтобы получить полные данные ответа сервера.

Вот и все! Теперь вы знаете, как выполнить запросы gRPC с помощью React, используя grpc-web.