IjzerenHein / firestorter

Use Google Firestore in React with zero effort, using MobX 🤘
http://firestorter.com
MIT License
378 stars 50 forks source link

No docs in nested collection #36

Closed imikemiller closed 5 years ago

imikemiller commented 5 years ago

Hi, first off thanks for the great library. Finally a simple approach to firebase in react.

I have read this issue https://github.com/IjzerenHein/firestorter/issues/7 and I am pretty sure my problem is related to implementation but I cannot figure out why my nested collection is coming back empty. Below is my code and a sample from the console log. The path value is setting correctly but there is no docs being returned.

class Items extends React.Component{
  constructor(props){
    super(props);

    this.items = new Collection(`${this.props.list.path}/items`);
  }

  componentWillReceiveProps(newProps) {
   if (newProps.list !== this.props.list) {
      this.items.path = `${newProps.list.path}/items`;
   }
  }

  render() {
      const {fetching, docs} = this.items;
      console.log('fetching: ', fetching, ', docs: ', docs,this.items);
      return <div>
          {docs.map((doc) => (
            <div key={doc.id}>
              <h1>{doc.id}</h1>
            </div>
          ))}
      </div>;
    }
}

Log

screenshot from 2018-09-23 10-50-54

imikemiller commented 5 years ago

Fixed it! Simple and obvious

const Items = observer(class Items extends React.Component{
  constructor(props){
    super(props);

    this.items = new Collection(`${this.props.list.path}/items`);
  }

  componentWillReceiveProps(newProps) {
   if (newProps.list !== this.props.list) {
      this.items.path = `${newProps.list.path}/items`;
   }
  }

  render() {
      const {fetching, docs} = this.items;
      console.log('fetching: ', fetching, ', docs: ', docs,this.items);
      return <div>
          {docs.map((doc) => (
            <div key={doc.id}>
              <h1>{doc.id}</h1>
            </div>
          ))}
      </div>;
    }
})
IjzerenHein commented 5 years ago

Hah, yes the collection needs to be observed in order for Firestorter to subscribe for updates to Firestore :)