[whatwg/url] Proposal: URL.setSearchParams() (Issue #828)

### What problem are you trying to solve?

Effectively, for a URL object, setting the `searchParams` (and by extension `search`) to some URLSearchParams object.

Currently, the `urlSearchParams` property is read-only (see: [URL: searchParams property](https://developer.mozilla.org/en-US/docs/Web/API/URL/searchParams)). Hence, to update the searchParams, one would have to update the `search` string property manually instead.

This is not ideal as developers may want to work in terms of objects rather than strings (`new URLSearchParams({ foo: "bar", baz: "qux" }`) is much more readable compared to `"?foo=bar&baz=qux"`). 

Being able to set the searchParams property without having to go through a string intermediate can be a pretty common case, such as appending multiple entries at once, or initializing with some default values.

### What solutions exist today?

Today, to update the searchParams, one would either have to run the `delete()` method for all current entries and `set()` for all new entries (which is impractical) or update the `search` string property manually such as:

```js
function setUrlSearchParams(url, searchParams) {
  if (searchParams.size === 0 || searchParams === null) {
    url.search = "";
  }
  url.search = "?" + searchParams.toString();
}
```

However, since `URLSearchParams.toString()` and `URL.search` are not the same value, this is slightly more complicated

The `toString()` does not include the question mark `?`, while `URL.search` does. This doesn't mean just by appending "?" that the proper value, since for both, an empty string is equivalent to a null query.

### How would you solve it?

I am not certain on the implementation details of the function, since just implementing the `setUrlSearchParams()` shown earlier method seems redundant (as you would have to parse the string into a `URLSearchParams` object to get the new `.searchParams` property), but in general, having a function `URL.setSearchParams` can make some tasks easier.

For instance, for the cases I mentioned:

Intializing a URL with default values
```js
// previously, with string immediate
const url = new URL(`https://example.com?${new URLSearchParams({ foo: "bar", baz: "qux" })}`);
const url = new URL("https://example.com?foo=bar&baz=qux");

// with a setSearchParams() method
const url = new URL("https://example.com")
url.setSearchParams(new URLSearchParams({ foo: "bar", baz: "qux" }))
```

Appending multiple entries
```js
// url already has search parameters
const url = new URL(`https://example.com?${new URLSearchParams({ foo: "bar", baz: "qux" })}`);
url.setSearchParams(new URLSearchParams([["foo", "bar"], ["baz", "qux"], ...url.searchParams]));
```

### Anything else?

_No response_

-- 
Reply to this email directly or view it on GitHub:
https://github.com/whatwg/url/issues/828
You are receiving this because you are subscribed to this thread.

Message ID: <whatwg/url/issues/828@github.com>

Received on Thursday, 23 May 2024 00:31:33 UTC