HOW TO SET UP AND USE gRPC IN REACT OR NEXT
Tags: grpc, protoc, api, google
Published: 2023-11-24 11:31:55

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xjr26i4xvuorlrg7zyiu.png)

5. Add a script property in you packge.json to run the shell file
  - example  "proto-build":"sh path_to_shell_file"

6. 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**

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

**=> CREATING API FROM COMPLIED PROTOS**
8. 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.

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

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qyi1bdl2by0iou7vlfts.png)
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
```



11. 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()
   },[])
```