Migrating from query-string to URLSearchParams
Tags: javascript
Published: 2023-08-02 09:32:59

---
title: Migrating from query-string to URLSearchParams
published: true
date: 2023-08-19 12:27:13 UTC
tags: JS
canonical_url: https://robertmarshall.dev/blog/migrating-from-query-string-to-urlsearchparams/
---

--------

This article was originally posted (and is more up to date) at https://robertmarshall.dev/blog/migrating-from-query-string-to-urlsearchparams/

--------

In my quest to remove as many third-party packages as possible from mine and my clients websites, I have been working through each package and checking if there is a native replacement.

[query-string](https://www.npmjs.com/package/query-string) is a super useful package for parsing URL parameters, but it now has a native replacement, [URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams). It can be used both in node and the browser.

One of the reasons to remove query-string is because of the continual error:

`npm WARN deprecated querystring. The querystring API is considered Legacy. new code should use the URLSearchParams API instead.`

The following functions should help with removing this package from your codebase.

## Stringify URL Params with URLSearchParams

I previously used `query-string` to take an object of arrays, and turn into a comma separated URL. The commas within the URL were not encoded.

This turned out to be a little bit trickier with `URLSearchParams`.

What used to be:

```javascript
queryString.stringify(params, {
    arrayFormat: 'comma',
})
```

Is now a bit longer:

```javascript
export const stringifyParams = (params) => {
    // Set up a new URLSearchParams object.
    const searchParams = new URLSearchParams()

    // Loop through the params object and append each key/value
    // pair to the URLSearchParams object.
    for (const [key, value] of Object.entries(params)) {
        searchParams.append(key, value)

        // If a key does not have a value, delete it.
        if (!searchParams.get(key)) {
            searchParams.delete(key)
        }
    }

    // Convert the URLSearchParams object to a string.
    const searchParamsString = searchParams.toString()

    // Replace the encoded commas with commas.
    const decodedSearchParamsString = searchParamsString.replace(/%2C/g, ',')

    return decodedSearchParamsString
}
```

## Parsing with URLStringParams

Parsing turned out to be a little easier.

What used to be:

```javascript
queryString.parse(location.search, { arrayFormat: 'comma' })
```

Is now the following:

```javascript
export const parseParams = (string) => {
    // Set up a new URLSearchParams object using the string.
    const params = new URLSearchParams(string)

    // Get an iterator for the URLSearchParams object.
    const entries = params.entries()

    const result = {}

    // Loop through the URLSearchParams object and add each key/value
    for (const [key, value] of entries) {
        // Split comma-separated values into an array.
        if (value.includes(',')) {
            result[key] = value.split(',')
        } else {
            result[key] = [value]
        }

        // If a key does not have a value, delete it.
        if (!value) {
            delete result[key]
        }
    }

    return result
}
```

These functions can be added to a util file within your JS project and imported when needed.  
Hopefully this helped you, and if you have any questions you can reach me at: [@robertmars](https://twitter.com/robertmars)