DEV Community

Cover image for HOW TO SET UP AND USE gRPC IN REACT OR NEXT
Faisal Salif
Faisal Salif

Posted on • Updated on

HOW TO SET UP AND USE gRPC IN REACT OR NEXT

  1. Download and install the protoc complier file
    https://github.com/protocolbuffers/protobuf/releases/tag/v25.

  2. Install protoc packages globally

    • npm install -g protoc-gen-js protoc-gen-grpc-web
  3. Install these two packages in your local project

    • npm install grpc-web google-protobuf
  4. 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

SHELL SCRIPT

  1. Add a script property in you packge.json to run the shell file

    • example "proto-build":"sh path_to_shell_file"
  2. 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

  3. run the script to compile raw proto file = npm run proto-build

=> CREATING API FROM COMPLIED PROTOS

  1. 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.

  2. 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"
}

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

Image description
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
Enter fullscreen mode Exit fullscreen mode
  1. 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()
   },[])
Enter fullscreen mode Exit fullscreen mode

Top comments (0)