React gRPC Query Hook

if you are in love with React Query and you're dealing with gRPC in you're application, react-grpc-query is brought to you to 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

yard add @apingtech/react-grpc-query

Example:

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

At first, create a hook for you're stream, and use useStream hook inside. Three parameters should be specified.

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

Stream Hook Example

function useExampleStream() {
    const [data, setData] = useState([]);

    useStream('stream-name', function streamFunction() {}, {
        onSuccess(result) {
            setData(result);
        },
    });

    return {
        data,
        isLoading: !data,
    };
}

Stream Hook Example with Config

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

function useExampleStream(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 streamFunction actually is?

streamFunction is just a pure function just like this:

function streamFunction(abortController: AbortController) {
    const call = new ExampleSubscriberClient(transport).subscribe(
        {
            id: 1,
            name: 'Lorem',
        },
        {
            abort: abortController.signal,
        }
    );

    return call;
}

What about onSuccess?

The onSuccess will fire on every stream event fire. it is recommended to store onSuccess in a useCallback.

The complete example is the example/useExampleStream.ts

folder.