# use-grpc

> Hooks for fetching asynchronous GRPC data in React!

Latest version **0.2.11** (published 2022-01-04) · 0 weekly downloads

## Install

```sh
npm install use-grpc
pnpm add use-grpc
yarn add use-grpc
bun add use-grpc
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.11 |
| Published | 2022-01-04 |
| First published | 2021-11-24 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 16.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Ali Shirzad |
| Maintainers | alishi973 |

## Links

- npm: https://www.npmjs.com/package/use-grpc
- Repository: https://github.com/alishi973/use-grpc
- Homepage: https://github.com/alishi973/use-grpc#readme
- Issues: https://github.com/alishi973/use-grpc/issues
- npm.io page: https://npm.io/package/use-grpc

## Dependencies (8)

- [react](https://npm.io/package/react.md) ^17.0.2
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [web-vitals](https://npm.io/package/web-vitals.md) ^1.0.1
- [react-scripts](https://npm.io/package/react-scripts.md) 4.0.3
- [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.12.1
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^11.1.0
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.11.4
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^12.1.10

## Recent versions

- 0.2.11 (latest) — 2022-01-04
- 0.2.10 — 2021-12-30
- 0.2.9 — 2021-12-25
- 0.2.8 — 2021-12-18
- 0.2.7 — 2021-12-17
- 0.2.6 — 2021-12-16
- 0.2.5 — 2021-12-16
- 0.2.4 — 2021-12-16
- 0.2.3 — 2021-12-16
- 0.2.2 — 2021-12-07
- 0.2.1 — 2021-12-06
- 0.2.0 — 2021-11-24
- 0.1.0 — 2021-11-24

## README

## useGRPC hook for interact with grpc application

[![install size](https://badgen.net/bundlephobia/minzip/use-grpc)](https://bundlephobia.com/result?p=use-grpc)
[![npm total downloads](https://badgen.net/npm/dt/use-grpc)](http://npm-stat.com/charts.html?package=use-grpc)

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

then, you may need [grpc-web](https://github.com/grpc/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](https://github.com/grpc/grpc-web#grpc-web).

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`:

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

(Depend on your proto files, you may need to install [grpc-web](https://github.com/grpc/grpc-web) and [google-protobuf](https://www.npmjs.com/package/google-protobuf) too)

Then you need to config your gateway and api methods:

```config.ts
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:

```api.ts
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`.

```App.tsx
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:

```Example.tsx
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](https://github.com/alishi973/use-grpc/tree/main/src/examples).

## CONTRIBUTING
Feel free to ask for feature, Any Pull Request will be appreciated.

Currently we are on pre-release version, so maybe you can't use this on the production :D

---
_Source: https://npm.io/package/use-grpc · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._