https://github.com/nixjs/grpc-client-toolkit

gRPC Client is the port of gRPC-Web library. For making gRPC requests from a browser.
https://github.com/nixjs/grpc-client-toolkit

grpc grpc-client grpc-react grpc-web protobuf protobufjs react typescript

Last synced: 21 days ago
JSON representation

gRPC Client is the port of gRPC-Web library. For making gRPC requests from a browser.

• Host: GitHub
• URL: https://github.com/nixjs/grpc-client-toolkit
• Owner: nixjs
• Created: 2022-07-02T01:16:22.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-10-05T08:25:03.000Z (over 1 year ago)
• Last Synced: 2025-01-16T17:25:12.955Z (25 days ago)
• Topics: grpc, grpc-client, grpc-react, grpc-web, protobuf, protobufjs, react, typescript
• Language: SCSS
• Homepage: https://grpc-client-toolkit.vercel.app/
• Size: 3.3 MB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# #gRpc Client

gRPC for Web Clients.

### Install

Install these dependencies:

`yarn add @nixjs23n6/grpc-core`

### Setup & Usage

```javascript

import { Client } from "@nixjs23n6/grpc-core";

import * as pbjs from "google-protobuf/google/protobuf/empty_pb";

import { ExampleClient } from "@example-proto/example_grpc_web_pb";

const grpcInstance = new Client({ url: "https://example.nixjs" });

grpcInstance.connect(ExampleClient, false);

grpcInstance.interceptorHeader(

  (config: any) => {

    return config;

  },

  (error: any) => {

    return Promise.resolve(error);

    // return Promise.reject(error)

  }

);

grpcInstance.interceptorResponse(

  (response: any) => {

    return response;

    // return response && response.toObject()

  },

  (error: any) => {

    return Promise.resolve(error);

    // return Promise.reject(error)

  }

);

grpcInstance.configure();

grpcInstance

  .send("getExample", new pbjs.Empty())

  .then((res: any) => console.log(res));

```

# #gRPC Client React

A react context which helps you to deal with gRPC web.

### Install

Install these dependencies:

`yarn add @nixjs23n6/grpc-core @nixjs23n6/grpc-react`

### Setup

```javascript

import React, { FC } from 'react';

import { GRPCProvider, ClientServiceSourceProps } from '@nixjs23n6/grpc-react'

import { ExampleClient1 } from '@example-proto/example_grpc_web_pb1'

import { ExampleClient2 } from '@example-proto/example_grpc_web_pb2'

import { ExampleClient3 } from '@example-proto/example_grpc_web_pb3'

const ClientServices: ClientServiceSourceProps[] = [

    {

        key: 'client1',

        source: ExampleClient1,

        config: { // optionals

            url: 'https://example.nixjs',

        },

    },

    {

        key: 'client2',

        source: ExampleClient2,

        config: { // optionals

            promiseType: true,

            storeKey: 'sessionAccessToken',

            storeType: 'session',

        },

    },

    {

        key: 'client3',

        source: ExampleClient3,

        config: { // optionals

            promiseType: true,

        },

    },

]

interface AppPropArg = {}

export const App: FC = () => {

    return (

        

            

            { /* Your app's components go here, nested within the context providers. */ }

        

    );

};

```

### Usage

```javascript

import React, { FC, useEffect } from 'react';

import { useGRPC } from '@nixjs23n6/grpc-react'

import * as pbjs from 'google-protobuf/google/protobuf/empty_pb'

interface GRPCPropArg = {}

export const GRPCComponent: FC = () => {

    const context = useGRPC()

    console.log('GRPC context', context)

    useEffect(() => {

        if (instance) {

            context.paymentClient.send('getExample1', new pbjs.Empty(), { authorization:'AccessToken'})

            .then((res: any) => {

                console.log('🚀 Response', res)

            })

            context.landingPageClient.send('getExample2', new pbjs.Empty()).then((res: any) => console.log(res))

        }

    }, [instance])

    return (


        { /* Your app's components go here, nested within the context providers. */ }

    
)

};

```


# #Reference & Example

Visit: