Firestore + React.js 如何通过用户过滤从 collections 获取文档？

Question

I have three fields for data, by default in the constructor they all setted to all. What ı want to do is making multiple queries on these fields like in mysql. For example: where field1 is apple, field2 is orange and ı do not touch the field 3.(Tumu means "All" by the way.) Here is my code:

class Kurumlar extends Component {
constructor(props) {
    super(props);
    this.state = {
        data: [],
        isLoading: true,
        page: 1,
        HizmetTuru: "Tumu",
        HizmetAlani: "Tumu",
        Ucretlendirme: "Tumu"
    };
}

handleChange = e => {
    this.setState({
        [e.target.name]: e.target.value
    }, console.log(this.state));
}


componentDidMount() {
    const db = firebase.firestore();
    let docs = db.collection("Paydaslar")

    console.log(this.state)

    //docs = db.collection("Paydaslar").where("HizmetTuru", "==", this.state.HizmetTuru);
    docs.get()
        .then(snapshot => {
            let data = [];
            snapshot.forEach(doc => {
                if (doc.data().isVisible) {
                    data.push(doc.data());
                }
            });

            this.setState({ data, isLoading: false });
        })
        .catch(err => {
            console.log("Error getting documents", err);
        });
}

componentDidUpdate(){
    const db = firebase.firestore();
    let docs = db.collection("Paydaslar")

   if(this.state.HizmetTuru != "Tumu"){docs=db.collection("Paydaslar").where("HizmetTuru", "==", this.state.HizmetTuru)}
   if(this.state.HizmetAlani != "Tumu"){docs=db.collection("Paydaslar").where("HizmetAlani", "==", this.state.HizmetAlani)}
  if(this.state.Ucretlendirme != "Tumu"){docs=db.collection("Paydaslar").where("Ucretlendirme", "==", this.state.Ucretlendirme)}


    docs.get()
        .then(snapshot => {
            let data = [];
            snapshot.forEach(doc => {
                if (doc.data().isVisible) {
                    data.push(doc.data());
                }
            });

            this.setState({ data, isLoading: false });
        })
        .catch(err => {
            console.log("Error getting documents", err);
        });
}

By this way if 1 field is setted to a value(different from all(Tumu in the code), other fields do not work.

Answer 1

If I understand correct you want to build a query with multiple possible conditions, depending on what the user selected.

In that case you can use the builder pattern:

const db = firebase.firestore();
let query = db.collection("Paydaslar").collection("Paydaslar")

if(this.state.HizmetTuru != "Tumu") {
  query = query.where("HizmetTuru", "==", this.state.HizmetTuru)
}
if(this.state.HizmetAlani != "Tumu") {
  query = query.where("HizmetAlani", "==", this.state.HizmetAlani)
}
if(this.state.Ucretlendirme != "Tumu"){
  query = query.where("Ucretlendirme", "==", this.state.Ucretlendirme)
}

docs.get()
  ...

Answer 2

I figured it out just in the if parts, do:

    if (this.state.HizmetTuru != "Tumu") { docs = docs.where("HizmetTuru", "==", this.state.HizmetTuru) }
    if (this.state.HizmetAlani != "Tumu") { docs = docs.where("HizmetAlani", "==", this.state.HizmetAlani) }
    if (this.state.Ucretlendirme != "Tumu") { docs = docs.where("Ucretlendirme", "==", this.state.Ucretlendirme) }