//tips
//smart contract
QuerySnapshotの方をjsonに変換する方法を探してみた。
https://firebase.google.com/docs/reference/js/firestore_#getdocs
https://stackoverflow.com/questions/53924257/return-documents-in-query-snapshot-as-json-string-firestore
The QuerySnapshot and Document classes are not simple JSON types. If you want to control what is written, you'll need to loop over querySnapshot (with map or forEach) and extract the JSON data for yourself.
下記のようにquerySnapshotをmapなどで展開し、その値をJSON.stringifyでjson形式に直す方帆が見られたのでそちらを試してみる。
getDocs = serverRef.where('online', '==', true).get()
.then(querySnapshot => {
if (querySnapshot.empty) {
res.send("NO SERVERS AVAILABLE");
} else {
var docs = querySnapshot.docs.map(doc => doc.data());
console.log('Document data:', docs);
res.end(JSON.stringify({kind: 'freeforge#PublicServerSearchResponse', servers: docs}));
}
});
基本的なjsonの流れは下記のような流れになっているのでこちらに寄せていく感じになるか。
const res = await fetch("https://jsonplaceholder.typicode.com/posts")
const posts = await res.json()
const paths = posts.map((post) => ({
params: {
id: post.id.toString(),
},
}))
return { paths, fallback: false }
これを参考に
posts.push(JSON.stringify({id:doc.data().userid}))
を挿入し、
const paths = posts.map((post) => ({
params: {
id: post.id.toString()
},
}))
を復活させた。post.id.toString()のtoString()が使用できないとエラー。
[
'{"id":1}',
'{"id":2}',
'{"id":3}',
'{"id":1}',
'{"id":1}',
'{"id":2}'
]
下記に変更。
const paths = posts.map(ninja => {
return {
params: { id:ninja.toString() }
}
})
ついにpathの中に値を入れることができたが、下記の形になってしまっている。
paths
[
{ params: { id: '{"id":1}' } },
{ params: { id: '{"id":2}' } },
{ params: { id: '{"id":3}' } },
{ params: { id: '{"id":1}' } },
{ params: { id: '{"id":1}' } },
{ params: { id: '{"id":2}' } }
]
forEach,pathsを下記のようにすることで、やっとこさgetStaticPathsの方の問題を突破。
posts.push(JSON.stringify(doc.data().userid))
const paths = posts.map(ninja => {
return {
//params: { id: ninja.toString() }
params: { id:ninja.toString() }
//params: ninja.toString()
}
})
[ '1', '2', '3', '1', '1', '2' ]
paths
[
{ params: { id: '1' } },
{ params: { id: '2' } },
{ params: { id: '3' } },
{ params: { id: '1' } },
{ params: { id: '1' } },
{ params: { id: '2' } }
]
{
params: { id: '2' },
[id]のパラメーターの受け渡しはgetStaticPropsでうまくいっていることは確認できているので、allPosts.forEach((doc) などの箇所を改造したgetStaticPathsをベースに更新していく。
無事にページが表示されるところまでは辿り着けた。
ただ、returnでdetabaseの記述はされていない。
console.log(getDocs(q))できちんとデータを取得できているかを確認。Promise { <pending> }
console.log(snapshot)console.log(data)の設置。
console.log(‘1’)までしか読み込まれておらず、snapshot.docs.forEachの工程がスキップされている。
await getDocs(q)
.then((snapshot)=>{
console.log('1')
snapshot.docs.forEach(doc => {
console.log('2')
const data = doc.data()
console.log('data.title')
console.log(data)
console.log(data.title)
posts.title = data.title
posts.details = data.details
posts.details = data.userid
posts.details = data.username
});
}).then(()=>console.log(posts))
Snapshotがいずれも空になっていたためqの設定がうまくいっていないのかもしれない。
試しにconst id = context.params.id.toString();としてみたが変化なし。
getDocs(colRef)できちんと機能するかを確認したところ問題なく、posts.push(JSON.stringify(doc.data().userid))の内容をpostsのログとして確認できた。
console.log(‘2’)も同じく確認できている。firebaseのデータベースの数字をstringにすると逆にエラーになってしまう。
条件を少し変更してトライ。
const q = await query(colRef,where("username","==","naki"))
そうすると無事に文言を受け渡しすることができた。
ただ、returnへの反映でエラーが出ており、<h1>{ ninja.title }</h1>では表示できないよう。
next-dev.js?3515:32 Warning: Did not expect server HTML to contain the text node "Complete my ninja training" in <h1>.
