DEV Community

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

Posted on

3 1

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

Heroku

Amplify your impact where it matters most — building exceptional apps.

Leave the infrastructure headaches to us, while you focus on pushing boundaries, realizing your vision, and making a lasting impression on your users.

Get Started

Top comments (0)

Sentry image

Make it make sense

Make sense of fixing your code with straight-forward application monitoring.

Start debugging →