React gRPC-Web — Building Real-Time React Apps with gRPC Backends

import { useState, useEffect } from "react";
import { ThreatServiceClient } from "./proto/threat.client";
import { GrpcWebFetchTransport } from "@protobuf-ts/grpcweb-transport";

const transport = new GrpcWebFetchTransport({
  baseUrl: process.env.REACT_APP_API_URL || "/grpc",
});

const client = new ThreatServiceClient(transport);

interface UseGrpcQueryOptions<T> {
  onSuccess?: (data: T) => void;
  onError?: (error: Error) => void;
  enabled?: boolean;
}

function useGrpcQuery<TRequest, TResponse>(
  method: (client: any, request: TRequest) => Promise<{ response: TResponse }>,
  request: TRequest | null,
  options?: UseGrpcQueryOptions<TResponse>
) {
  const [data, setData] = useState<TResponse | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<Error | null>(null);
  
  useEffect(() => {
    if (!request || options?.enabled === false) {
      return;
    }
    
    let cancelled = false;
    
    async function fetch() {
      setLoading(true);
      setError(null);
      
      try {
        const { response } = await method(client, request);
        if (!cancelled) {
          setData(response);
          options?.onSuccess?.(response);
        }
      } catch (err) {
        if (!cancelled) {
          setError(err as Error);
          options?.onError?.(err as Error);
        }
      } finally {
        if (!cancelled) {
          setLoading(false);
        }
      }
    }
    
    fetch();
    
    return () => {
      cancelled = true;
    };
  }, [JSON.stringify(request)]);
  
  return { data, loading, error, refetch: fetch };
}

// Usage in component
function ThreatList() {
  const { data, loading, error } = useGrpcQuery(
    (c, r) => c.listThreats(r),
    { pageSize: 50, severity: "CRITICAL" }
  );
  
  if (loading) return <Spinner />;
  if (error) return <ErrorDisplay error={error} />;
  
  return (
    <ul>
      {data?.threats.map(t => (
        <ThreatItem key={t.threatId} threat={t} />
      ))}
    </ul>
  );
}

import { useState, useEffect, useRef, useCallback } from "react";
import { GrpcWebFetchTransport } from "@protobuf-ts/grpcweb-transport";
import { ThreatServiceClient } from "./proto/threat.client";
import type { Threat } from "./proto/threat";

const transport = new GrpcWebFetchTransport({
  baseUrl: process.env.REACT_APP_API_URL || "/grpc",
  fetchInit: {
    credentials: "include",
  },
});

const client = new ThreatServiceClient(transport);

interface StreamState {
  connected: boolean;
  lastMessage: Threat | null;
  error: Error | null;
}

function useThreatStream(deviceId?: string) {
  const [threats, setThreats] = useState<Threat[]>([]);
  const [state, setState] = useState<StreamState>({
    connected: false,
    lastMessage: null,
    error: null,
  });
  const streamRef = useRef<{ cancel: () => void } | null>(null);
  const retryTimeoutRef = useRef<number>();
  
  const connect = useCallback(() => {
    if (streamRef.current) {
      streamRef.current.cancel();
    }
    
    setState(s => ({ ...s, connected: true, error: null }));
    
    const stream = client.streamThreats({
      deviceId: deviceId || "",
    });
    
    stream.responses.onMessage((threat) => {
      setThreats(prev => [threat, ...prev].slice(0, 100));
      setState(s => ({
        ...s,
        lastMessage: threat,
      }));
    });
    
    stream.responses.onError((error) => {
      console.error("Stream error:", error);
      setState(s => ({
        ...s,
        connected: false,
        error: error as Error,
      }));
      
      // Auto-reconnect after 3 seconds
      retryTimeoutRef.current = window.setTimeout(() => {
        connect();
      }, 3000);
    });
    
    stream.responses.onComplete(() => {
      setState(s => ({ ...s, connected: false }));
    });
    
    streamRef.current = stream;
  }, [deviceId]);
  
  useEffect(() => {
    connect();
    
    return () => {
      if (streamRef.current) {
        streamRef.current.cancel();
      }
      if (retryTimeoutRef.current) {
        clearTimeout(retryTimeoutRef.current);
      }
    };
  }, [connect]);
  
  return {
    threats,
    isConnected: state.connected,
    lastMessage: state.lastMessage,
    error: state.error,
    reconnect: connect,
  };
}

// Component using the subscription
function ThreatDashboard() {
  const {
    threats,
    isConnected,
    error,
    reconnect,
  } = useThreatStream();
  
  return (
    <div className="dashboard">
      <div className="status-bar">
        <span className={`indicator ${isConnected ? "connected" : "disconnected"}`} />
        {isConnected ? "Connected" : "Disconnected"}
        {error && (
          <button onClick={reconnect}>Reconnect</button>
        )}
      </div>
      
      <div className="threat-feed">
        {threats.map(threat => (
          <ThreatCard key={threat.threatId} threat={threat} />
        ))}
      </div>
    </div>
  );
}

{
  "scripts": {
    "proto:generate": "protoc \
      --plugin=protoc-gen-ts=./node_modules/.bin/protoc-gen-ts \
      --js_out=import_style=commonjs,binary:src/proto \
      --ts_out=service=grpc-web:src/proto \
      --proto_path=../protos \
      ../protos/**/*.proto"
  },
  "dependencies": {
    "@protobuf-ts/grpcweb-transport": "^2.9.0",
    "@protobuf-ts/runtime": "^2.9.0",
    "@protobuf-ts/runtime-rpc": "^2.9.0"
  }
}

// package.json scripts
// "proto:gen": "buf generate ../protos --template buf.gen.yaml"

// buf.gen.yaml
// version: v1
// plugins:
//   - plugin: es
//     out: src/proto
//     opt: target=ts
//   - plugin: connect-es
//     out: src/proto
//     opt: target=ts