Use-grpc NPM | npm.io

useGRPC hook for interact with grpc application

Have you ever tried to bring grpc connection to the web?

then, you may need grpc-web for handle this type of requests.

for normal use of grpc-web, you wont have hard time, but when types comes important, you may have nightmare :D

using grpc-web is kinda ugly at first, you can see the document here.

but you can leave everythings to use-grpc for handling request and it will return everythings you need.

this hook will use grpc-web under the hood at all.

Usage

The use-grpc is available at npm:

$ npm i use-grpc
// or using yarn
$ yarn add use-grpc

(Depend on your proto files, you may need to install grpc-web and google-protobuf too)

Then you need to config your gateway and api methods:

import { createGateway } from 'use-grpc'

import * as HelloModel from './hello_pb'
import { HelloServiceClient } from './HelloServiceClientPb'

import * as GoodByeModel from './goodbye_pb'
import { GoodByeServiceClient } from './GoodByeServiceClientPb'

const baseUrl = "http://www.example.com"

const gateway = createGateway({
    HelloService: {
        client: createService(HelloServiceClient, baseUrl),
        model: HelloModel
    },
    GoodByeService: {
        client: createService(GoodByeServiceClient, baseUrl),
        model: GoodByeModel
    }
})

export { gateway }

createService will make Service client with specified url (we add option for include credentials in the future). createGateway will make Gateway (using gateway without this function may have issue with undefined this, so we bind this to the gateway)

After create gateway, create your api like this:

import { gateway } from './config.ts'

const api = {
    sayHello: {
        client: gateway.HelloService.client.sayHello,
        payload: () => new gateway.HelloService.model.HelloRequest()
    }
}

export { api }

Then you need to wrap your application with GrpcQueryProvider.

import { GrpcQueryProvider } from 'use-grpc'

export default function App() {
  return (
        <!-- Another Provider -->
            <GrpcQueryProvider>
                <RootComponent />
            </GrpcQueryProvider>
        <!-- Another Provider -->
    )
}

finally you can use useGRPC hook to fetch data:

import { useGRPC } from 'use-grpc';
import { api } from './api';

const ExampleApplication = () => {
  const { data, call, isLoading, error } = useGRPC(api.sayHello);

  return (
    <div>
      ...
    </div>
  );
};

Or if you want more example, take a look at here.