フロントエンドの勉強の一環としてNuxt.js と firebase で ポートフォリオを作成できるサービスを作成しています。
ユーザーのポートフォリオをSSRで表示する際にポートフォリオのデータをCloud Firestoreから取得し、ページネーションを作成するために公式に記載されているコードを使用しています
このリンク先のクエリのページ設定という見出しの部分に記載されています
このページネーションを作成するためのコード(コメントで印がしてあります)をreturn で返した時にページをリロードすると表題のエラーが発生します。
<nuxt-link>などのリンクでページを移動した場合はページを表示する時ページから離れる時どちらも問題なく行えます。
リロードした場合のみに起こります。
この
users[3].docs[users[3].docs.length -1]
コードをreturnで返さなければペーシをリロードしてもエラーは発生しなくなります。
フロント側でのエラー画面は
このように表示されサーバー側では
Cannot stringify arbitrary non-POJOs QueryDocumentSnapshot
このように表示されております。
どなたかご教授いただきたく思います。
よろしくお願いいたします。
asyncData() { return db .collection("skillsheets") .doc("user") .get() .then(function(doc) { if (doc.exists) { let baseRef = doc.data().user let skillRef = baseRef.collection("skills") let userRef = baseRef let careersRef = baseRef.collection("careers") let portfoliosRef = baseRef.collection("portfolios").limit(12) return Promise.all([ userRef.get(), skillRef.get(), careersRef.get(), portfoliosRef.get() ]).then(function(users) { let userSkills = {} for ( doc of users[1].docs ) { userSkills[doc.id] = doc.data() } let userCareers = {} for ( doc of users[2].docs ) { userCareers[doc.id] = doc.data() } let userPortfolios = {} for ( doc of users[3].docs ) { userPortfolios[doc.id] = doc.data() } return { //下の一行を削除するとMaximum call stack size exceededは発生しません lastPortfolio: users[3].docs[users[3].docs.length -1], user: users[0].data(), userSkills: userSkills, userPortfolios: userPortfolios, qualifications: userSkills.qualifications.qualifications, userCareers: userCareers, } }) } else { // doc.data() will be undefined in this case console.log("No such document!") } }) .catch(function(error) { console.log("Error getting document:", error) }) },
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。