{"id":49503,"library":"testreactrpc","title":"React gRPC-Web Integration","description":"A library providing full-featured integration of gRPC-Web into React applications. Current stable version 1.0.205 with rapid updates (multiple releases daily). Key differentiators: seamless hooks and components for gRPC-Web streaming, unary calls, and automatic state management. Unlike raw gRPC-Web clients, this library offers React-specific abstractions like useGrpcQuery and useGrpcMutation, reducing boilerplate. Supports TypeScript out of the box. Release cadence is high-frequency with frequent minor patches.","status":"active","version":"1.0.205","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","typescript"],"install":[{"cmd":"npm install testreactrpc","lang":"bash","label":"npm"},{"cmd":"yarn add testreactrpc","lang":"bash","label":"yarn"},{"cmd":"pnpm add testreactrpc","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core gRPC-Web client for making RPC calls.","package":"grpc-web","optional":false},{"reason":"Peer dependency for React hooks and components.","package":"react","optional":false}],"imports":[{"note":"Named export, not default.","wrong":"import GrpcProvider from 'testreactrpc'","symbol":"GrpcProvider","correct":"import { GrpcProvider } from 'testreactrpc'"},{"note":"ESM-only; no CommonJS support.","wrong":"const { useGrpcQuery } = require('testreactrpc')","symbol":"useGrpcQuery","correct":"import { useGrpcQuery } from 'testreactrpc'"},{"note":"Re-exported from index; avoid deep imports.","wrong":"import { GrpcClient } from 'testreactrpc/dist/GrpcClient'","symbol":"GrpcClient","correct":"import { GrpcClient } from 'testreactrpc'"}],"quickstart":{"code":"import React from 'react';\nimport { GrpcProvider, useGrpcQuery } from 'testreactrpc';\nimport { EchoServiceClient } from './generated/echo_grpc_web_pb';\n\nconst client = new EchoServiceClient('http://localhost:8080', null, null);\n\nfunction App() {\n  return (\n    <GrpcProvider client={client}>\n      <EchoComponent />\n    </GrpcProvider>\n  );\n}\n\nfunction EchoComponent() {\n  const { data, loading, error } = useGrpcQuery({\n    method: 'echo',\n    request: { message: 'Hello' },\n  });\n\n  if (loading) return <div>Loading...</div>;\n  if (error) return <div>Error: {error.message}</div>;\n  return <div>Response: {data?.message}</div>;\n}\n\nexport default App;","lang":"typescript","description":"Shows setting up GrpcProvider with a gRPC-Web client and using useGrpcQuery hook to call an echo method."},"warnings":[{"fix":"Pass client prop and use 'clientOptions' if needed.","message":"v1.0.0 changed the signature of GrpcProvider: 'client' prop is now required and 'options' prop removed.","severity":"breaking","affected_versions":">=1.0.0 <1.0.0"},{"fix":"Replace with useGrpcQuery and set 'streaming: true'.","message":"useGrpcSubscription is deprecated since v1.0.100; use useGrpcQuery with streaming option instead.","severity":"deprecated","affected_versions":">=1.0.100"},{"fix":"Ensure you instantiate the client with new before passing.","message":"GrpcProvider requires a client instance; passing a client class instead of instance causes runtime error.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use import syntax or migrate to ESM.","message":"The library does not support CommonJS require(); it is ESM-only. Attempting require yields 'ERR_REQUIRE_ESM'.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'1.0.205':23 'abstract':59 'applic':19 'automat':44 'boilerpl':65 'box':71 'cadenc':73 'call':42 'client':52 'compon':35 'current':20 'daili':29 'differenti':31 'featur':11 'frequenc':77 'frequent':79 'full':10 'full-featur':9 'grpc':3,15,38,50 'grpc-web':2,14,37,49 'high':76 'high-frequ':75 'hook':33 'integr':5,12 'javascript':82 'key':30 'librari':7,54 'like':60 'manag':46 'minor':80 'multipl':27 'offer':55 'patch':81 'provid':8 'rapid':25 'raw':48 'react':1,18,57 'react-specif':56 'reduc':64 'releas':28,72 'seamless':32 'specif':58 'stabl':21 'state':45 'stream':40 'support':66 'typescript':67,83 'unari':41 'unlik':47 'updat':26 'usegrpcmut':63 'usegrpcqueri':61 'version':22 'web':4,16,39,51","created_at":"2026-06-07T17:02:06.410414+00:00","updated_at":"2026-06-07T17:02:06.410414+00:00","problems":[{"fix":"Check the generated client methods; method name should match exactly (e.g., 'echo', 'echoMessage').","cause":"Using useGrpcQuery with 'method' name that doesn't exist on client.","error":"TypeError: client.echo is not a function"},{"fix":"Wrap your component tree with <GrpcProvider> at the root.","cause":"Using a hook like useGrpcQuery outside of <GrpcProvider> wrapper.","error":"Error: Not inside a GrpcProvider"},{"fix":"Run 'npm install testreactrpc' and ensure your bundler resolves modules correctly.","cause":"Package not installed or missing in tsconfig paths.","error":"Module not found: Can't resolve 'testreactrpc'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":null,"github":null,"docs":null,"changelog":null,"pypi":null,"npm":"testreactrpc","openapi_spec":null,"status_page":null,"smithery":null,"categories":["api-client"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-07","next_check":"2026-09-05","install_tag":null}}