https://github.com/apingtech/react-grpc-query

a react hook which helps you to deal with gRPC APIs
https://github.com/apingtech/react-grpc-query

Last synced: 12 days ago
JSON representation

a react hook which helps you to deal with gRPC APIs

• Host: GitHub
• URL: https://github.com/apingtech/react-grpc-query
• Owner: apingtech
• License: mit
• Archived: true
• Created: 2021-10-17T18:36:48.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2022-05-02T22:13:39.000Z (over 2 years ago)
• Last Synced: 2024-09-20T12:38:02.567Z (about 2 months ago)
• Language: TypeScript
• Homepage:
• Size: 7.95 MB
• Stars: 14
• Watchers: 0
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

    

  

  

    

  

 



# 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

```ts

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 React Hook can also accept some config. In this scenario, you can keep the key as a string by converting an object to `JSON`.

```ts

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 stream function is?

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

```tsx

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 run on every stream update event running.

We recommended you to store onSuccess in a useCallback.

The complete example is the [example/useExampleStream.ts](example/useExampleStream.ts)

folder.