Nuxt.jsのアプリケーションででページをロードするとデータを失ってしまう

Question

一部不具合を含んだコードや誤った記述があったため、質問を削除しました。再度調べ直して投稿します。

Comments

[nt4c]

「問題が起こっていると思われる箇所」のソースにpropsの記載がありますが、コレはコンポーネントファイルですか？

[MH00214]

ご質問ありがとうございます。こちらはpages/blog/_slug.vueなのでコンポーネントファイルではありません。

Answer 1

エラーメッセージを見ると、contentfulでコンテンツが見つけられていないのが原因だと思います。
Errors – Contentful

asyncData内でparams.sysの値でContentfulから記事を取得していますが、こちらの値が期待した値になっているかが気になります。
コードを読んでいて、slugに対応したブログ記事を表示したいのかなと思ったのですが、その場合はparams.sysをparams.slugに修正すると、ブログのslugに対応したルーティング名が取得できてContentfulから記事が取得できそうだと思いました。
動的ルートマッチング Vue Router

Comments

[MH00214]

コメントありがとうございます。
先ほど試してみましたが、エラ〜メッセージは変わらずでした・・・
> contentfulでコンテンツが見つけられていないのが原因だと思います。
確かにおっしゃる通りだと思います。

nuxt.cong.js側には

```
generate: {
routes() {
return cdaClient.getEntries(ctfConfig.CTF_BLOG_POST_TYPE_ID)
.then(entries => {
return [...entries.items.map(entry => `/blog/${entry.fields.slug}`)]
})
}
},
```
のように記述したのですが、ここが間違っているのでしょうか。。

yarn generateした結果は

```
Generated /blog/undefined 23:06:55 Generated /
```
となっていたのでparams.sysがundefinedになっているのですかね。

[shgtkshruch]

nuxt.config.jsはそうなっているんですね。
おそらく動的ルーティングのための設定だと思うので、このコード自体は必要だと思います。

ただ、` cdaClient.getEntries(ctfConfig.CTF_BLOG_POST_TYPE_ID)`でちゃんとContentfulと認証したクライアントでアクセスできているかを確認したほうがいいと思いました。
最初に貼っていただいたエラーメッセージでも `id` や`space`が`undefined`になっていましたよね？
これを見てContentfulの認証情報が適切に設定されていないように見えました。

すでに調査されているかもしれませんが、`contentful.json`などのファイルに認証情報を記載して、それをNuxt.jsのenvに設定したり、それが`./plugins/contentful.js`でちゃんと読み込めているかデバックされるといいかと思います。
公式ドキュメントには手順が載っていましたので、こちらを参考にするといいと思います。
https://www.contentful.com/developers/docs/javascript/tutorials/integrate-contentful-with-vue-and-nuxt/