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

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

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

4

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

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2022 All Rights Reserved Powered by AFFINGER5.