📘

paginationのためのURL paramをZodで数値にする

2023/10/19に公開

Zod で pagination のための param を Zod で検証したい動機

URL はユーザーによって如何様にも変更できる内容なので、searchParams や dynamicParams は、
基本的に Zod で動的に検証しても良いと思っています。

その中でもページネーションを扱う時の URL の場合は、"1"、"2"、"30"のような numeric(数値的な) な文字列を想定すると思いますが、
"hoge"や?page=のように numeric ではない文字列や空文字の場合もあります。

想定していない文字列が入力された時の挙動をそれぞれエラーハンドリングをしていると骨が折れますし、
numeric ではない場合は数値1に丸めてしまいたいという欲求があり、Zod で実現できないか検証しました。

const pageParam = z.coerce.number.min(1).catch(1);
const pageNumber = pageParam.parse(xxx);

上記のようなルールにすると、numeric ではない文字列や空文字が入力されたとしても1に丸めることができ、
numeric な文字列は数値に変換して、pagination のロジックで使用することができました。

coerce.numberでは、parse 時に number 型に強制します。その場合、NaNになるような値(hogeなど)はエラーがスローされます。

.min(1)は1未満の数値でエラーがスローされます。
pagination で0や-1など負の値は不要で、ロジック内でのバグの原因になりそうですので除外しています。

.catch()は parse でエラーになる値の場合に、エラーをスローする代わりに指定した値を返します。
.catch(1)とすることで、下記のエラーになる場合に数値1の返却を強制します。