React gRPC Query Hook

If you are in love with React Query and are dealing with gRPC in your React application, react-grpc-query is here to help you use a simple interface to deal with streaming.

We use protobuf-ts@2.* in the examples https://github.com/timostamm/protobuf-ts

Installation and Setup Instructions

npm i @apingtech/react-grpc-query

or if you use yarn

yarn add @apingtech/react-grpc-query

Example:

react-grpc-query uses a global stream handler; hence you have only one open stream per key.

At first, create a hook for you're stream, and use the useStream hook inside. You should specify three parameters.

• the first one is the key which is a string
• the second one is stream Function, a callback function that should connect to your stream transport. (more on later)
• the third parameter is called options

Stream Hook Example

functionuseExampleStream(){const[data,setData]=useState([]);useStream('stream-name',functionstreamFunction(){},{onSuccess(result){setData(result);},});return{
data,isLoading: !data,};}

Stream Hook Example with Config

Your React Hook can also accept some config. In this scenario, you can keep the key as a string by converting an object to JSON.

functionuseExampleStream(config={}){const[data,setData]=useState([]);useStream(JSON.stringify({name: 'stream-name',id: config.id,}),streamFunctionWithConfig(config),{onSuccess(result){setData(result);},});return{
data,isLoading: !data,};}

what stream function is?

The stream function is just a pure function just like this:

functionstreamFunction(abortController: AbortController){constcall=newExampleSubscriberClient(transport).subscribe({id: 1,name: 'Lorem',},{abort: abortController.signal,});returncall;}

What about onSuccess?

The onSuccess will run on every stream update event running. We recommended you to store onSuccess in a useCallback.

The complete example is the example/useExampleStream.ts

folder.