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()
},[])
Top comments (0)