//tips
//smart contract
必要であればonSnapshotを使用したリアルタイムの反映も交えて考える。
const [books, setBooks] = useState([])
const firestore = getFirestore(firebaseApp)
console.log(firestore)
const colRef=collection(firestore, "mydata")
console.log(colRef)
const q =query(colRef,where("age","==","39"))
console.log(q)
getDocs(q)
.then((snapshot)=>{
//console.log(snapshop.docs)
let boys=[]
snapshot.docs.forEach(doc => {
boys.push({...doc.data(),id:doc.id})//...で新しいオブジェクトに入れている
});
console.log(boys)
setBooks(boys)
})
Queryで範囲制限をしたがうまく取得できず。
こうなってくるとお手上げなので、シンプルな部分取得を再度作ってみる。
function apptest2() {
const [books, setBooks] = useState([])
// Initialize Firebase app
initializeApp(firebaseConfig);
//init services
const db=getFirestore()
//collection ref
const colRef=collection(db,"mydata")
const q =query(colRef,where("author","==","naki"))
getDocs(q)
.then((snapshot)=>{
//console.log(snapshot.docs)//このオブジェクトの中にある必要な部分を取り出す
let books=[]
snapshot.docs.forEach((doc)=>{
books.push({...doc.data(),id:doc.id})//doc.dataでデータ部分からタイトルなどの取り出し
})
console.log(books)
setBooks(books)
})
なんとauthorで検索をqueryを行うと一部取得ができた。
const q =query(colRef,where("age","==","39”))ではなく、const q =query(colRef,where("age","==",39))とすると数字は取得できることがわかってきた。
Useeffectの中でも無事に反映できた。
const [books, setBooks] = useState([])
// 単一抜き出し
useEffect(() => {
//const firestore = getFirestore(firebaseApp)
const getBook = async () => {
//const path="mydata/1"
const colRef=collection(firebaseApp, "mydata")
const q =query(colRef,where("age","==",39))
getDocs(q)
.then((snapshot)=>{
//console.log(snapshop.docs)
let books=[]
snapshot.docs.forEach(doc => {
books.push({...doc.data(),id:doc.id})//...で新しいオブジェクトに入れている
});
console.log(books)
setBooks(books)
})
これでクエリの条件にあたるユーザー情報を渡せれば、各ユーザーの独自情報を表示できる。データベースではstringとnumberでは別物として扱われるので型にも気を付ける。
Db.jsonの内容をFirebaseの中に移し、表示がきちんとされるか確認。
表示はされたものの、ユーザー単位での整理ができておらず、ドキュメントid名前の機能がいまいちわかっていない。現在は直接ドキュメント内のフィールドの値でフィルタリングしてしまっている。
const q =query(colRef,where("username","==","naki"),orderBy('title','desc'))
また、orderByを加えてabcの逆順で各項目を並べるようにした。
タイムスタンプを使用したい場合はserverTimestampをインポート。
この流れで単一ドキュメントの抜き出しを行ったらすんなりいった。
//再トライ単一抜き出し
const docRef=doc(firebaseApp, "mydata",'abc')
getDoc(docRef)
.then((doc)=>{
console.log(doc.data(),doc.id)
})
ドキュメント名がわかればドキュメントの抜き出しは行えそう。ドキュメントの方を少し勘違いしていたが、これはフォルダではなく、あくまでもフィールドコンテンツ一塊のタイトルになっており、複数のフィールドを内包できるわけではないことに注意が必要。
現状のjsonからのfetch部分をこれらのfirebaseからの取り出しに変換していく。その後にFire base Authをeditページへの遷移タイミングで適用できるように準備する。
[id]の方にまずは内容を反映させる。
データベースの方の設定も行って、configが少し変わってしまったので２種類作りインポートさせた。後で融合させる。
import firebaseApp from "../../components/firebase"
import firebase from "../../components/firebase2"
今までのfetch部分をそのまま置き換える。
下記をうまく変換していく必要があり。
//受け取るcontextの内容を編集
export const getStaticPaths = async () => {
const res = await fetch('https://jsonplaceholder.typicode.com/users');
const data = await res.json();
// map data to an array of path objects with params (id)
const paths = data.map(ninja => {
return {
params: { id: ninja.id.toString() }
}
})
console.log(paths)
return {
paths,
fallback: false
}
}
//contextは{ params: { id: '2' },などの内容で取得
export const getStaticProps = async (context) => {
console.log(context)
const id = context.params.id;
const res = await fetch('https://jsonplaceholder.typicode.com/users/' + id);
const data = await res.json();
return {
props: { ninja: data }
}
}
最初はconst data=[]に入れて継承しようとしたがエラー、useStateもエラーさてどうするか。
//受け取るcontextの内容を編集
export const getStaticPaths = async () => {
//const res = await fetch('https://jsonplaceholder.typicode.com/users');
//const data = await res.json();
const [data, setdata] = useState([])
const getdata = async () => {
//const path="mydata/1"
const colRef=collection(firebaseApp, "mydata")
getDocs(colRef)
.then((snapshot)=>{
//console.log(snapshop.docs)
let data=[]
snapshot.docs.forEach(doc => {
data.push({...doc.data(),id:doc.id})//...で新しいオブジェクトに入れている
});
setdata(data)
})
}
getdata()
console.log("data")
console.log(data)
// map data to an array of path objects with params (id)
const paths = data.map(ninja => {
return {
params: { id: ninja.id.toString() }
}
})
//console.log(paths)
return {
paths,
fallback: false
}
}
//contextは{ params: { id: '2' },などの内容で取得
export const getStaticProps = async (context) => {
console.log(context)
const [data, setdata] = useState([])
const id = context.params.id;
//const res = await fetch('https://jsonplaceholder.typicode.com/users/' + id);
//const data = await res.json();
//const data=[]
const getBook = async () => {
//const path="mydata/1"
const colRef=collection(firebaseApp, "mydata")
const q =query(colRef,where("userid","==",id))
getDocs(q)
.then((snapshot)=>{
//console.log(snapshop.docs)
let data =[]
snapshot.docs.forEach(doc => {
data.push({...doc.data(),id:doc.id})//...で新しいオブジェクトに入れている
});
setdata(data)
})
}
getBook()
console.log("data")
console.log(data)
return {
props: { ninja: data }
}
}
