REST API Url builder !!

#frontend #urlbuilder #learn #software

You must have come across a situation where you are making a REST API call via frontend code and doing something like this -

try {
  const response = await fetch(`/api/users/${userId}/details?name=abc&age=31&height=174&address=xyz`)
  const data = response.json()
  return data;
} catch(err) {
  console.log(`Error: ${err}`)
}

Now in the above example, we tend to pass the whole API endpoint URL string but what if it gets generated automatically for you and you don't need to write the entire URL string.

I have created an npm package nkr_urlbuilder that can help you solve this problem.

Do the following,

import { buildRestUrl } from 'nkr_urlbuilder';

let url = '/api/users/{userId}/details';
let urlParams = {userId: 123};
let queryParams = {
     name: 'abc', 
     age: 31, 
     height: 174, 
     address: 'xyz'
};

try {
  const response = await fetch(buildRestUrl(url, urlParams, 
  queryParams))
  const data = response.json()
  return data;
} catch(err) {
  console.log(`Error: ${err}`)
}