Parsing Query Parameters With Query-string Library

In this video you will learn about parsing query parameters with query-string library. In plain Javascript there are no functions to work with URLs efficiently this is why I always recommend query-string library as a best solution.


Hi I'm Oleksandr Kocherhin from monsterlessons-academy, where I'm teaching you how to become a developer or improve your skills of being a developer in learning by doing way. And if you are new here don't forget to subscribe and I will link everything that I'm mentioning in the description.

So let's get started.


So here is the official package but on the real example it will be much easier to see benefits. Here I have index.html where I simply included this library this library.

So the most popular usecase is to get query parameters from url. For example you have a pagination in the project and you want to get query parameters in comfortable form to work with. Or sorting/filtering parameters. Normally inside or inside frameworks which don't parse query params for you you simply get which has string of query params inside.

The comfortable way for us to work with query params will be to convert them to object. For this we can use function parse from queryString.library.

const parsed = queryString.parse(;
//=> {foo: 'bar'}

So here we are getting an object and we can easily use properties later to build our logic.

The next usecase what we often have is to generate stringified query params. So we have several properties in javascript like order: 'asc', field: 'title', filter='foo' and we need to generate query string. Of course we can concatenate properties just inside string but it is really ugly

const stringified = queryString.stringify({order: 'asc', field: 'title', 'filter': 'foo'})
//=> '?order=asc&field=title&filter=foo'

As you can see we get fully correct query params.

And the last usecase is that you want for example get baseUrl (without query params) or you need to add some params to it. Let's make a small task what happens really often when you implement pagination.

So you can have some apiUrl. It can be just a baseUrl like '/articles' as well as url with query parameters. '/articles?author=foo'. And we want to add to this url limit and offset parameters because this is needed for our pagation feature.

As you can see we can't just concatenate a string because it's possible that you already have question mark inside and it won't be a valid string if we do that. So here queryString library solves our problems really nice.

First we can use parseUrl function from it. As a result you will get baseUrl and query params as an object. If we don't have any query params then it will be empty.

const parsedUrl = queryString.parseUrl('')

Now we can add our limit and offset to existing query parameters because it's just an object

const parsedUrl = queryString.parseUrl('')
const queryParams = {
  limit: 20,
  offset: 0,

As you can see I used here spread operator from es6 to merge in single object 2 properties and all other properties from query.

Now we can stringify query params and add them to our base url.

const parsedUrl = queryString.parseUrl('')
const queryParams = {
  limit: 20,
  offset: 0,
const stringifiedQueryParams = stringify(queryParams)
const urlWithParams = `${parsedUrl.url}?${stringifiedQueryParams}`

As you can see without lot's of hassle, parsing a string or unreadable logic and string concatenation we in 5 lines implemented the needed logic with the help of queryString.

Call to action

I'm not a fan to install libraries for every problem but queryString is super small and I use it in almost every project. So next time if you think about concatenating parameters in strings yourself just try to install this library.

Also don't forget to check my full courses regarding different web technologies. I will link them down in the description box below.

If you find this video helpful, don't forget to subscribe to this channel and hit subscribe button. And I see you in my next video.

🚨 Important

📚 References