i encountered an issue:
when using the useEffect function to retrieve my firestore documents, it works well. Currently, I am fetching all "profiles" documents (3 in total). However, I now want to only retrieve the documents where the field "workerProfile" is set to true. There are 2 documents with false and 1 document with true, so ideally, it should return an array with just 1 document.
Performing this manually in the firebase console yields the desired result.
https://i.sstatic.net/EvP6f.png
https://i.sstatic.net/3xncw.png
below you can see my useEffect function utilizing
,where('workerProfile', '==', true)useEffect(() => {
const getProfiles = async () => {
const querySnapshot = await getDocs(collection(fireDb, "profiles"),where('workerProfile', '==', true))
console.log(querySnapshot, "CHECK OUT")
setProfiles(querySnapshot.docs.map(doc => {
return {
id: doc.id,
data: {
userProfileUrl: doc.data().userProfileUrl,
displayName: doc.data().displayName,
likesCount: doc.data().likesCount,
bio: doc.data().bio
}
}
}))
}
getProfiles()
}, [])
The
console.log(querySnapshot, "CHECK OUT")https://i.sstatic.net/NB926.png
I have referred to the firebase documentation for guidance but remain puzzled by the issue. Perhaps I have overlooked something?
Any help would be greatly appreciated as this problem is becoming quite frustrating for me.
The technologies i'm working with include:
- firebase 9.14.0
- firebase-admin ^11.2.1
- firebase-functions ^4.0.2
- next 13.0.2
- react: 18.2.0
Below you'll find my complete context-file for further reference:
import { createContext, useEffect, useState, useContext } from "react"
import { collection, getDocs, getDoc, doc, where, query, setDoc } from "firebase/firestore"
import { fireDb } from "../../firebaseClient"
const FantsyContext = createContext()
const FantsyProvider = ({ children }) => {
const [users, setUsers] = useState([])
const [currentLoggedUser, setCurrentUser] = useState([])
const [profiles, setProfiles] = useState([])
// GET USERS
useEffect(() => {
const getUsers = async () => {
const querySnapshot = await getDocs(collection(fireDb, "users"))
setUsers(querySnapshot.docs.map(doc => {
return {
id: doc.id,
data: {
...doc.data()
}
}
}))
}
getUsers()
}, [])
// GET PROFILES
useEffect(() => {
const getProfiles = async () => {
const querySnapshot = await getDocs(collection(fireDb, "profiles"),where('workerProfile', '==', true))
console.log(querySnapshot, "CHECK OUT")
setProfiles(querySnapshot.docs.map(doc => {
return {
id: doc.id,
data: {
userProfileUrl: doc.data().userProfileUrl,
displayName: doc.data().displayName,
likesCount: doc.data().likesCount,
bio: doc.data().bio
}
}
}))
}
getProfiles()
}, [])
return (
<FantsyContext.Provider
value={{ profiles, users }}
>{children}</FantsyContext.Provider>
)
}
export { FantsyContext, FantsyProvider }