Install & Compatibility
Where this runs
No compatibility data collected yet for this library.
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
createGateway
✓ import { createGateway } from 'use-grpc'
✗ import createGateway from 'use-grpc'
createGateway is a named export, not default.
useGRPC
✓ import { useGRPC } from 'use-grpc'
✗ import { useGrpc } from 'use-grpc'
hook is named useGRPC with uppercase GRPC, not useGrpc.
GrpcQueryProvider
✓ import { GrpcQueryProvider } from 'use-grpc'
✗ import { GrpcProvider } from 'use-grpc'
Provider component name is GrpcQueryProvider.
createService
✓ import { createService } from 'use-grpc'
Helper to create a bound gRPC client with a base URL.
Configures a gateway for a gRPC-Web service, creates an API client, and uses the useGRPC hook to fetch data.
import { createGateway, createService, useGRPC, GrpcQueryProvider } from 'use-grpc';
import * as HelloModel from './hello_pb';
import { HelloServiceClient } from './HelloServiceClientPb';
import { createGRPCWebClient } from 'grpc-web';
const baseUrl = 'http://localhost:8080';
const gateway = createGateway({
HelloService: {
client: createService(HelloServiceClient, baseUrl),
model: HelloModel
}
});
const api = {
sayHello: {
client: gateway.HelloService.client.sayHello,
payload: () => new gateway.HelloService.model.HelloRequest()
}
};
function App() {
return (
<GrpcQueryProvider>
<Example />
</GrpcQueryProvider>
);
}
function Example() {
const { data, call, isLoading, error } = useGRPC(api.sayHello);
if (isLoading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
return <div>{data?.getMessage()}</div>;
}
Debug
Known issues
gotchaThe useGRPC hook returns `call` as a function, but you must invoke it to trigger the request. It does not auto-fetch on mount.fixCall `call()` in a useEffect or event handler; e.g., `useEffect(() => { call(); }, []);` affects: >=0.0.0
gotchaThe `createService` function currently does not support custom credentials (e.g., withCredentials). The README mentions this is a future addition.fixManually set credentials on client options after creation if needed: `client.setCredentials({...})`. affects: >=0.0.0 <=0.2.11
deprecatedPackage is in pre-release (v0.x) and may have breaking changes with minor bumps. Not recommended for production.fixLock version to a specific patch if used in production.
affects: >=0.0.0 <1.0.0
gotchaThe gateway object methods must be created with `createService` to avoid 'this' binding issues. Using client directly may cause runtime errors.fixAlways use `createService(ClientClass, baseUrl)` instead of instantiating manually.
affects: >=0.0.0
Errors
Common errors & fixes
TypeError: Cannot read properties of undefined (reading 'sayHello')
Gateway not properly created with createGateway or client binding missing.
fixEnsure you pass the result of createService() to the gateway config and use createGateway to bind the client.
Uncaught ReferenceError: grpc is not defined
Missing grpc-web dependency or incorrect import.
fixRun `npm install grpc-web` and ensure your proto-generated client is correctly built.
Warning: Each child in a list should have a unique "key" prop.
Rendering a list of gRPC responses without keys.
fixAdd a unique key to each rendered element, e.g., `data.map(item => <div key={item.getId()}>...</div>)`. Audit
Dependencies
grpc-webrequiredpeer dependency; actual gRPC-Web client used under the hood