react-grpc-web v0.0.2

react-grpc-web

Typed React hooks for gRPC-web.

Install

npm install react-grpc-web

Requirements

• react >= 16.8

Usage

Before using this library, you have to generate Typescript clients from .protos with grpc-web.

Unary RPC

import { useUnaryRPC } from "react-grpc-web";

// client class generated by grpc-web
import { EchoServiceClient } from "./EchoServiceClientPb";
// request class generated by grpc-web
import { EchoRequest } from "./echo_pb";

const client = new EchoServiceClient("http://localhost:8080");

export const App = () => {
  const { loading, data, error } = useUnaryRPC(client.echo, EchoRequest, {
    variables: { message: "hello" },
  });

  return (
    <div>
      {loading ? (
        <div>loading...</div>
      ) : error ? (
        <div>{error}</div>
      ) : (
        <>
          <div>message: {data.message}</div>
          <div>messageCount: {data.messageCount}</div>
        </>
      )}
    </div>
  );
};

Server Streaming RPC

import { useServerStreamingRPC } from "react-grpc-web";

// client class generated by grpc-web
import { EchoServiceClient } from "./EchoServiceClientPb";
// request class generated by grpc-web
import { ServerStreamingEchoRequest } from "./echo_pb";

const client = new EchoServiceClient("http://localhost:8080");

export const App = () => {
  const { data } = useServerStreamingRPC(
    client.serverStreamingEcho,
    ServerStreamingEchoRequest,
    {
      variables: { message: "11", messageCount: 456, messageInterval: 1234 },
    }
  );
  return (
    <div>
      {data.map((d) => (
        <div key={d.message}>message: {d.message}</div>
      ))}
    </div>
  );
};