I migrated from firebase Realtime Database to Cloud firestore in one of my ReactJS projects. And I am fairly new to Firestore.

Here's what I need. Consider that I have details of items stored in a collection 'Items'.

In Realtime database, I just had to do this to get the data and store it in the state:

database.ref('Items').once('value', (snapshot) => {
    this.setState({items: snapshot.val()})    
})

snapshot.val() returns all the objects in Items as a single object containing them. That makes it easy for me to render them in a table with Object.keys(this.state.items).map()

From what I know so far:

This is not the case with Firestore. Firestore returns an object that can only retrieve the data in the child only by iterating through each one of them.

So the best I could e up with was:

db.collection('Items').get().then(gotData)
gotData = (snapshot) => {
    snapshot.forEach((item) => {
        const item = {[item.id]: item.data()}
        this.setState(previousState => ({
            items : {...previousState.items, ...item}
        }))
    })
}

The problem with the above solution is that the state will get updated a number of times equal to the number of items in the collection. So I wonder if there is a better way to do it.

I migrated from firebase Realtime Database to Cloud firestore in one of my ReactJS projects. And I am fairly new to Firestore.

Here's what I need. Consider that I have details of items stored in a collection 'Items'.

In Realtime database, I just had to do this to get the data and store it in the state:

database.ref('Items').once('value', (snapshot) => {
    this.setState({items: snapshot.val()})    
})

snapshot.val() returns all the objects in Items as a single object containing them. That makes it easy for me to render them in a table with Object.keys(this.state.items).map()

From what I know so far:

This is not the case with Firestore. Firestore returns an object that can only retrieve the data in the child only by iterating through each one of them.

So the best I could e up with was:

db.collection('Items').get().then(gotData)
gotData = (snapshot) => {
    snapshot.forEach((item) => {
        const item = {[item.id]: item.data()}
        this.setState(previousState => ({
            items : {...previousState.items, ...item}
        }))
    })
}

The problem with the above solution is that the state will get updated a number of times equal to the number of items in the collection. So I wonder if there is a better way to do it.

• javascript
• reactjs
• firebase
• google-cloud-firestore

Share Improve this question Follow edited Feb 26, 2018 at 19:12 Ajmal Noushad asked Feb 26, 2018 at 15:46 Ajmal NoushadAjmal Noushad 94677 silver badges1818 bronze badges 5

• I don't understand what you're trying to acplish here. Of course, if you iterate all the documents in a collection, you'll be doing something once for each document. – Doug Stevenson Commented Feb 26, 2018 at 16:55
• I would like to know that if there is a way to set state only once, with all the objects in the collection like in the case of Realtime Database. ie. like all the objects are in snapshot.val() in realtime db – Ajmal Noushad Commented Feb 26, 2018 at 17:00
• Set the state of what? I don't really see what you're trying to acplish. – Doug Stevenson Commented Feb 26, 2018 at 17:26
• 1 Its Reactjs. I want to fetch the data and store it into the state to render it inside a table. – Ajmal Noushad Commented Feb 26, 2018 at 19:12
• What exactly are you trying to fetch? What does your datastore data look like? It looks like you're fetching an entire collection, which means you're iterating each document in that collection. – Doug Stevenson Commented Feb 26, 2018 at 19:16

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Almost there, you just want to put the empty object outside the iteration like so...

db.collection('Items').get().then(snap => {
    const items = {}
    snap.forEach(item => {
     items[item.id] =  item.data()
    })
    this.setState({items})
}

Or you could just map it, which I find easier to think about.

db
 .collection('Items')
 .get()
 .then(collection => {
    const items = collection.docs.map(item => {[item.id]: item.data()})
    this.setState({ items })
 })

Or you can use reduce to return an object containing all the items.

db
 .collection('Items')
 .get()
 .then((collection) => {
     const items = collection.docs.reduce((res, item) => ({...res, [item.id]: item.data()}), {});
     this.setState({items})
 })