HOW TO SET UP AND USE gRPC IN REACT OR NEXT

Faisal Salif — Fri, 24 Nov 2023 11:31:55 +0000

Download and install the protoc complier file
https://github.com/protocolbuffers/protobuf/releases/tag/v25.
Install protoc packages globally
- npm install -g protoc-gen-js protoc-gen-grpc-web
Install these two packages in your local project
- npm install grpc-web google-protobuf
Create a proto.sh file in Root Dir of your project, (this will have the script to compile our raw protos to js or tsx
=> Sample of the script i used

Add a script property in you packge.json to run the shell file
- example "proto-build":"sh path_to_shell_file"
Create a folder called protos in your src or app folder and inside the protos folder create a folder called raw. which we'll keep all our raw proto files. e.g src/proto/raw
run the script to compile raw proto file = npm run proto-build

=> CREATING API FROM COMPLIED PROTOS

Create a folder in your src and name it api , this folder will have all api files we would be using for our api calls.
Create a apiConfig.js file in your src/app directory , this file will have the URL and METADATA (configurations)

e.g export const URL = "url_to_your_backend"
export const METADATA = {
key: "key_to_connect",
pass:"password_to_connect"
}

Now we can go ahead to connect to the backend and consume our api's.

This how I connect to my api and access a method from the proto services

import {METADATA,URl} from './app/apiConfig.js'
import {CustomerSvcClient} from './protos/gen/Customer_grpc_web_pb' (give you the service method you need to use)
import {Request1,Request2,..} from './protos/gen/Customer/pb' (gives you the messages or requests to you need to use)

    function CustomerController(){
       const client = new CustomerSvcCLient(URL,null,null)

       //Creating a function to make your api requests
       const getAllCustomers = async(**data**)=>{
       try{
         return new Promise(resolve,reject)=>{
         const request = new Request1()

         //if our request requires a body we can attach them as so
         request.setName(data.name)
         request.setAge(data.age)

         //We can make out api call by using a method from our 
         client 
         client.getAllUsers(request,METADATA,(err,response)=>{
           if(err) reject(err)
           //converts our response to object
           const result = response.toObject() 
           resolve(result)
         })
       }
      }
     }catch(err){
      console.log(err)
     }

     cosnt anotheFucntion=async()=>{....}



    return {getAllCustomers,anotherFunction}



    }

export default CustomerController

Consuming the api and displaying data e.g App.js

import CustomerController from './file_directory'

//grab the methods you want to use from the API file
const {getAllCustomers,anotherFunction} = CustomerController() 

  useEffect(()=>{
     async function getData(){
       const getValue = await getAllCustomers({name:'myname',age:20})
       console.log(getValue.userlistList)
       setData(getValue.userlistList)
     }
     getData()
   },[])

DEV Community: Faisal Salif

HOW TO SET UP AND USE gRPC IN REACT OR NEXT