SupabaseのDateのカラムをZodでバリデーションするときの注意点

こんにちは。株式会社SasaTechの佐々木です。

SasaTechでは、Next.jsとSupabaseを使用したアプリケーション開発を得意としています。

今回は、SupabaseにデータをINSERTするときに、Zodのバリデーションで躓いたのでそれの解決策をメモしておきます。

背景

Supabase（Postgres）のDate型をインサートするために、Zodのバリデーション日付をz.date()としていました。

この際に、以下のエラーが発生しました。
type Date | undefined is not assignable to type string | null | undefined

原因としては、Supabaseの日付はString型を要求ひているがが、z.date()はDate型を返却するため上記のようなエラーが発生するとのこと。

/api/event/route.ts

export const eventCreateSchema = z.object({
    name: z.string(),
    event_d: z.date()
});

export function POST() {
    const body = await request.json() || {};
    const payload = eventCreateSchema.parse(body);
    const supabase = createClient();
    const { data: agent, error } = await supabase
        .from("event")
        .insert(data) // event_dはString型を要求するが、Date型が入力されるのでエラー
    return NextResponse.json(data, { status: 200 });
}

解決

ZodはString型でDateのフォーマットにすることが出来る。
https://zod.dev/?id=dates

/api/event/route.ts

export const eventCreateSchema = z.object({
    name: z.string(),
    event_d: z.string().date()
});

export function POST() {
    const body = await request.json() || {};
    const payload = eventCreateSchema.parse(body);
    const supabase = createClient();
    const { data: agent, error } = await supabase
        .from("event")
        .insert(data) // event_dは文字列でDateフォーマットで入力されるためErrorにならない。
    return NextResponse.json(data, { status: 200 });
}