【Next.js】useSearchParamsでdeleteメソッドは使えない
useSearchParamsはread onlyなURLSearchParams
フロントエンドの開発をしているとURLクエリパラメータを操作したくなるときは誰にでもあると思います。
具体的にはパラメータに値を追加したり、値を取得して使用したりなどです。
この操作を実現できるようにNext.jsはuseSearchParamsというhookを用意してくれています。
公式ドキュメントにはread onlyなURLSeachParamsと表現されており、Next.js向けにカスタマイズしたものなら使いやすそうだと思い、実装に用いてみました。
deleteメソッドは？
僕は「read onlyなURLSearchParamsである」という説明を見て、じゃあdeleteメソッドはどうなっているんだと気になりました。
ご存知の方が多いかもしれませんが、URLSearchParamsはdeleteメソッドで特定のクエリパラメータを削除することができます。
MDNの例をそのまま掲載しますが、以下のような使い方をすることができます。
const url = new URL("https://example.com?foo=1&bar=2&foo=3");
const params = new URLSearchParams(url.search);
console.log(`Query string (before):\t ${params}`); // Query string (before): foo=1&bar=2&foo=3
params.delete("foo");
console.log(`Query string (after):\t ${params}`); // Query string (after): bar=2
前提としてnext/navigationの型を見にいくと以下のようにメソッドの型自体は存在しました。
delete(): void;
次にその挙動を探るためにNext.jsのソースコードを見ました。
僕が見つけられた範囲であれば以下の部分が実際のuseSearchParamsの実装になると思います。
そしてなんと驚くことにdeleteメソッドの中ではエラーがthrowされていました笑🤣
function readonlyURLSearchParamsError() {
return new Error('ReadonlyURLSearchParams cannot be modified')
}
~略~
delete() {
throw readonlyURLSearchParamsError()
}
型を見た時点でURLSearchParamsとは違う(引数がない)ので怪しいなと思っていましたが、まさかのエラーがthrowされるというおもしろい実装に出会うことができました。
まとめ
以上、偶然出会ったNext.jsの興味深い実装についてでした。
結局今回はdeleteが使用できなかったためURLSearchParamsを使用しました。
次回、クエリパラメータを操作する機会があればuseSearchParamsを使ってみたいと思いました。
参考
Discussion