REST API Integration

REST API Integration

We use Axios interceptor and store base URL in environment file. And all the endpoints are stored or added in the endpoints.json under services folder.

Typical endpoint structure

The structure will be similar to this   v1/<team-name>/<resource-name>

e.g. APi endpoint from Request Microservices team will be something like this   v1/request/getRequest

Similarly API from Volunteer Microservice team will be like   v1/volunteer/getProfilePic

Integration

When we get any endpoint for particular task, first store the endpoint in endpoints.json. Check with backend team about expected JSON request body and what will be typical API response back. Make sure that webapp is not sending parameters in query string or as path variables with the API call as it is not secure. Only pass JSON in request body. e.g. {"subject": " Need help with gardening", "city": "New York", "state":"NY"}

Suppose the API is from Request Microservice team and uses Axios GET method , then add code like below in requestServices.js under services folder. Similarly if the API is from Volunteer microservice team, add code in the volunteerServices.js under services folder.

export const getMyRequests = async () => {
 const response = await api.get(endpoints.GET_MY_REQUESTS);
 return response.data;
};

And then import requestServices.js/volunteerServices.js in the webapp page where you need to integrate this API and call the getMyRequests().

Example for POST API call,
export const addUser = async (request) => {
 const response = await api.post(endpoints.ADD_USER, request);
 return response.data;
};

File upload

For file upload like picture or audio file, convert it into Base64 format. There is a standard 5MB size limit for the file upload size.