概要

nuxt/content の only関数がローカル環境とデプロイした環境で挙動が違ったという話

content.nuxtjs.org

背景

プロダクトの一部にnuxt/contentを使ってマークダウンで作成した記事を表示するみたいな機能を作成したのだが

ローカル環境では正常に表示されるのに、

デプロイした環境ではなぜか表示されず、原因はわからなかったのが今回の話の発端

機能概要

ディレクトリ

/content

content/article
┣ article01
┣ article02
┣ article03
・
・
・

mdファイル例

---
title
---

# hogehoge

取得のながれ

上記構成の記事一覧をasyncvDataで取得して"title"を見出しとして表示

const code = await context
      .$content("article")
      .only(["title"])
      .fetch();

見出しを押下するとopenDialogに押下した項目を引数として渡して、pathからmdファイルを取得する

 async openDialog(item: FetchReturn) {
      const documents = await this.$content(item.path).fetch();
      if (Array.isArray(documents)) {
        this.document = documents[0];
      } else {
        this.document = documents;
      }
}

原因

結論から言うと、only("title")で本来titleしか取得していないところを、
開発環境では"path"も取得しており、
結果開発環境では正常に取れているように見えていた

しかし、デプロイした環境では"path"は取得しておらず、結果、取得に失敗していた

なので、only のkeyにpathを取得してあげる必要があった

const code = await context
      .$content("article")
      .only(["title", "path"])
      .fetch();

また、fetchResultのpahtは"/"が先頭につくがこれは不要なので slice(1) で削除する必要もある

 async openDialog(item: FetchReturn) {
      // 先頭の"/"は不要
      const documents = await this.$content(item.path.slice(1)).fetch();
      if (Array.isArray(documents)) {
        this.document = documents[0];
      } else {
        this.document = documents;
      }
  },

おわりに

今回の挙動を特定するために、むりやりプロダクションモードのVueでDevToolを使ったりと

問題の特定に非常に時間がかかった明らかに、開発環境での動きが怪しいのだが、なぜこんなことがおきるのだろうか...?

なんかいろいろと書いてくブログ

関東のどこかで働く、一般人

【Nuxt】nuxt/contentのonly挙動について

概要

背景