Blockchain code Metaverse VR

Crypto×VR×SmartContract(513)

スポンサーリンク

//tips

//smart contract

getStaticProps周りとの連動がうまくいっていないので、firebaseと連動している例がないかを検索。

https://stackoverflow.com/questions/66064397/how-to-correctly-use-getstaticprops-for-firebase

https://qiita.com/centerfield77/items/49b029d4d1618dfeedb6

Pushで配列に格納したものをpropsで受け渡す仕組みで問題なさそう。

posts.push({
pid: doc.data().pid,
title: doc.data().title,
})

return {
props: {
posts
}
}

getStaticPaths の方がエラーの要因となったのだろうか。

Change let post = [] to let post = {} and it should work just fine.

との文言がある。オブジェクトに格納する形で試してみるか。

https://stackoverflow.com/questions/66083949/data-fetched-from-getstaticprops-is-not-displayed-in-page-component

下記の形に書き換え対応を実施。
//受け取るcontextの内容を編集
export const getStaticPaths = async () => {
//const res = await fetch('https://jsonplaceholder.typicode.com/users');
//const data = await res.json();

let posts = {}

//const path="mydata/1"
const colRef=collection(firebaseApp, "mydata")

let allPosts =getDocs(colRef)

for (const doc of allPosts.docs) {
console.log(doc.id, '=>', doc.data())
console.log('the id is....')

//let data = doc.data()

posts.push({...doc.data(),id:doc.id})
}

// map data to an array of path objects with params (id)
const paths = posts.map(ninja => {
return {
params: { id: ninja.id.toString() }
}
})

//console.log(paths)

return {
paths,
fallback: false
}
}

//contextは{ params: { id: '2' },などの内容で取得
export const getStaticProps = async (context) => {

let post = {}

const id = context.params.id;

//const res = await fetch('https://jsonplaceholder.typicode.com/users/' + id);
//const data = await res.json();

//const data=[]

const colRef=collection(firebaseApp, "mydata")

const q =query(colRef,where("userid","==",id))

const allPosts=getDocs(q)

allPosts.forEach((doc) => {
const data = doc.data()

console.log(data.title)
post.title = data.title
post.details = data.details
post.details = data.userid
post.details = data.username

})

return {
props: { ninja: post }
}
}

allPosts.docでエラーが出ていたので下記に変更。

for (const doc of allPosts) {

これでもエラーが出ているので、forではなくmapを使用するか。

for (const doc of allPosts) {
console.log(doc.id, '=>', doc.data())
console.log('the id is....')

//let data = doc.data()

posts.push({...doc.data(),id:doc.id})
}

allPostsの各要素をidとコンテンツという形で格納していければよいはずなので、

allposts.map(doc => {
posts.push({...doc.data(),id:doc.id})
})

let allPosts =getDocs(colRef)

allPosts.map(doc => {
posts.push({...doc.data(),id:doc.id})
})

Mapに変えてもエラーとなってしまうのでallPostsを使わずにいってみる。

const paths = posts.forEach(ninja => {
return {
params: { id: ninja.id.toString() }
}
})

posts.forEach is not a function

なんとかエラーは解消できたが、pathsに何も入らないのでページがnot foundになる。

console.log('paths')
console.log(paths)

Doc.data()が怪しく感じたので試しに中身を抜き出してみた。

getDocs(colRef)
.then((snapshot)=>{
//console.log(snapshop.docs)
//let books=[]
snapshot.docs.forEach(doc => {
//posts.push({...doc.data(),id:doc.userid})//...で新しいオブジェクトに入れている
//posts.push({id:doc.userid})
posts.push({...doc.data().username})

});

}).then(()=>console.log(posts))

[
{},
{},
{},
{},
{ '0': 'n', '1': 'a', '2': 'k', '3': 'i' },
{ '0': 'n', '1': 'a', '2': 'k', '3': 'i' }
]

オブジェクトの取り出しはできているので、単純なループで回数をカウントさせれば良いかと考えたが、同じuseridの複数投稿も考慮するとだめ。

Useridを一通り抜き出して入れる。重複がその際にどう影響するかも確認する。

userid.toString()はエラー。useridは表示されない。これはstringでデータベースに登録しているものしかconsole.logで表示されないよう。

getDocs(colRef)
.then((snapshot)=>{
//console.log(snapshop.docs)
//let books=[]
snapshot.docs.forEach(doc => {
//posts.push({...doc.data(),id:doc.userid})//...で新しいオブジェクトに入れている
//posts.push({id:doc.userid})
posts.push({id:doc.data().userid})

});

}).then(()=>console.log(posts))

これによりpostsは的確にはき出せるようになった。

[ { id: 1 }, { id: 2 }, { id: 3 }, { id: 1 }, { id: 1 }, { id: 2 } ]

Pathの設定を様々な角度から試し中。

const entries =getDocs(colRef)
const paths = entries.docs.map(entry => ({
params: {
id: entry.data().userid.toString()
}
}));

// map data to an array of path objects with params (id)
// const paths = posts.map(ninja => {
// return {
// //params: { id: ninja.toString() }
// params: { id:ninja.toString() }
// }
// })
// const paths = posts.map((ninja) => ({
// params: { id: ninja.toString()}
// }))

console.log('paths')
console.log(paths)

なかなかうまく組み込めない。

シンプルなところから見直す。

https://stackoverflow.com/questions/65783199/error-getstaticpaths-is-required-for-dynamic-ssg-pages-and-is-missing-for-xxx

https://jsshowcase.com/question/getstaticpaths-is-required-for-dynamic-ssg-pages-and-is-missing-for-contentslug-slug

https://zenn.dev/yumiyoshi/scraps/f6220f26263103

問題はgetDocs()の型かもしれない。

getDocs()
Executes the query and returns the results as a QuerySnapshot 。

https://firebase.google.com/docs/reference/js/firestore_#getdocs

人気の記事

1

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

3

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2023 All Rights Reserved Powered by AFFINGER5.