DEV Community

Cover image for REST API Url builder !!
Nitin Reddy
Nitin Reddy

Posted on

REST API Url builder !!

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}`)
}
Enter fullscreen mode Exit fullscreen mode

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}`)
}
Enter fullscreen mode Exit fullscreen mode

Discussion (0)