Nuxt Content v3.1.1 のリリース

表題の通り、Nuxt Content v3.1.1 がこの記事を書いているつい先ほどリリースされた。僕が v2 から v3 に移行するにあたって躓いていた部分が修正されているので取り上げたい。

リリースノートに query: Allow uppercase in column name という項目があるのが確認できる。カラム名で大文字が許容されるようになった、という修正だ。つまり、これ以前のバージョンでは大文字が許容されていなかった、ということになる。

移行作業当時の content v3 のバージョンは 3.1.0 で行っていて、v2 の頃に元々定義していた createdAt という項目をそのまま collections のスキーマ定義に記述し、以下のようにトップページで記事を作成日の降順で全件取得するコードを書いていた。

const { path } = useRoute();
const { data: articles } = await useAsyncData(path, () => queryCollection('blog').select('title', 'path', 'description', 'createdAt').order('createdAt', 'DESC').all());

しかし、これで開発環境を起動すると [nuxt] [request error] [unhandled] [500] Invalid query error. というエラーで怒られるという現象が発生。文言だけ見ても何が悪くてどう対処すべきなのか検討がつかなくて困っていた。

エラーメッセージでググるとこの issue が見つかり、どうやら原因が createdAt の使用であり、それがクエリのバリデーションに引っかかっているということが判明した。

issue に倣い、作成日のスキーマ定義とそれに伴って各記事の markdown ファイル内のフロントマター、トップページで記事を取得する際のクエリでカラム名を指定する部分をそれぞれ createdAt から created_at へ修正し、なんとか事なきを得た。

これは完全に自分の想像だが、v3 から SQLite ベースのコンテンツ管理が導入された結果、コレクションのスキーマ名定義がデータベース側に合わせて基本的にスネークケースになってしまい、バリデーションもそのようなものになっていたのかなと考えている。

なんにせよ、ひとまず修正されて裏側を意識せず Javascript の世界と規約の中で改めて完結するようになったので助かった。issue を起票した人、解決に取り組んだ Nuxt Content の開発者の皆さんに心から感謝します。

これから v3 へ移行作業する人はもうハマらない箇所なのだが、自分への備忘録と万が一同じような状況でハマっている人への参考になればと思いこの記事を書いた。