firestore where() filter collection by field for context provider next.js-CodePudding

i have a problem as follows:

i'm retrieving my firestore documents via useEffect function and it works just fine. Right now I'm retrieving all "profiles" documents (3 at this point). But now i want to retrieve only the documents, which field "workerProfile" is true. I have 2 docs with false and 1 with true, so it should only show me an array with 1 doc.

When doing so in firebase console manually, it is working.

below is my useEffect function with the ,where('workerProfile', '==', true) which is not working, but also not giving any errors.

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()
    }, [])

but my console.log(querySnapshot, "CHECK OUT") still shows all 3 profiles, instead of only 1.

I already tried to find some hints from the firebase documentation, but i still have no idea, why it is not working. Maybe I'm missing something here?

I would really appreciate if someone could help me here, because this is starting to annoy me really bad.

I'm working with

firebase 9.14.0
firebase-admin ^11.2.1
firebase-functions ^4.0.2
next 13.0.2
react: 18.2.0

Below is my complete context-file for further information:

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 }

CodePudding user response：

Try

await getDocs(query(collection(fireDb, "profiles"), where('workerProfile', '==', true)))

I think you just used getDocs(collection(<ref>, <collection name>)) and so getDocs() function ignored the rest args(where() query).

So, use query() function inside getDocs().